Почему в Swiper JS пагинация с фракцией не работает?

@Tempest999 · Регистрация: 27.03.2018

Студворк — интернет-сервис помощи студентам

Хочу использовать прогрессбар вместе с пагинацией-фракцией. Для этого создал блок .image-slider__fraction в котором и разместил все элементы. Проблема в том, что он почему-то выдает мне ошибку Uncaught ReferenceError: myImageSLider is not defined. В чем проблема?

Сайт http://ilyin1ib.beget.tech/

Весь код https://jsfiddle.net/qav8z7f3/

HTML5
1
2
3
4
5
<div class="image-slider__fraction">
                        <div class="image-slider__current">1</div>
                        <div class="image-slider__sepparator">/</div>
                        <div class="image-slider__total">1</div>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
let mySliderAllSlides = document.querySelector('.image-slider__total');
    let mySliderCurrentSlide = document.querySelector('.image-slider__current');
 
    mySliderAllSlides.innerHTML = myImageSLider.slides.length;
 
    myImageSLider.on('slideChange',  function() {
        let currentSlide = ++myImageSLider.realIndex;
        mySliderCurrentSlide.innerHTML = currentSlide;
    });

@Masson1848 · 12.07.2021, 07:33

Я так понимаю, что вы просто скопировали код, но не сильно в нём разбирались.

У вас не определена переменная myImageSlider, поэтому вам и выдаёт ошибку.

Я поправил ваш код. Но вам нужно внимательнее быть со свойством slides, он подхватывает не только картинки, которые в этом теге.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
$(document).ready(function() {
 
 
  $(".main-gal.owl-carousel").owlCarousel({
    autoplay: true,
    slideSpeed: 9000,
    items: 1,
    autoHeight: true,
    loop: true,
    nav: false,
    navText: ["<i class='fas fa-chevron-left'></i>", "<i class='fas fa-chevron-right'></i>"],
    center: true,
    dots: true,
    responsiveClass: true,
    smartSpeed: 400,
    margin: 0,
    responsive: {
      0: {
        items: 1,
        margin: 0,
        dots: false,
        nav: true
      },
      768: {}
    }
  });
 
 
  const swiper = new Swiper('.image-slider', {
    // Optional parameters
    slidesPerView: 3,
    spaceBetween: 30,
    direction: 'horizontal',
    centeredSlides: true,
    loop: true,
    loopedSLides: 3,
    simulateTouch: true,
    grabCursor: true,
    speed: 800,
    pagination: {
      el: '.swiper-pagination',
      type: 'progressbar'
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    autoplay: {
      delay: 1000,
    }
  });
 
 
 
  $('.owl-prev').on('click', function(event) {
    event.preventDefault();
    $(this).css("color", "#FF5722")
    $('.owl-next').css("color", "#000")
  });
 
 
  $('.owl-next').on('click', function(event) {
    event.preventDefault();
    $(this).css("color", "#FF5722")
    $('.owl-prev').css("color", "#000")
  });
 
 
  let mySliderAllSlides = document.querySelector('.image-slider__total');
  let mySliderCurrentSlide = document.querySelector('.image-slider__current');
 
  mySliderAllSlides.innerHTML = swiper.imagesLoaded;
 
  swiper.on('slideChange', function() {
 
    let currentSlide = ++swiper.realIndex;
    mySliderCurrentSlide.innerHTML = currentSlide;
  });
 
 
  var $hamburger = $(".hamburger");
  $hamburger.on("click", function(e) {
    $(this).toggleClass("is-active");
    $('.menu_reg_block').toggleClass("menu_reg_block_open");
    $('.content').toggleClass("content_move");
    $('.logo').toggleClass("logo_move");
    $('.bg').toggleClass("bg_show");
  });
 
});

@gogolik · 12.07.2021, 08:36

Не по теме:

Сообщение от Masson1848

Я так понимаю, что вы просто скопировали код, но не сильно в нём разбирались.

ТС уже 3 слайдер пытается пристроить для этой и подобной задачи и ни в один не хочет вникать. Хочет, чтобы волшебным образом всё само заработало или добрые люди написали за него решение.

@Masson1848 · 12.07.2021, 09:23

Не по теме:

Сообщение от gogolik

ТС уже 3 слайдер пытается пристроить для этой и подобной задачи и ни в один не хочет вникать. Хочет, чтобы волшебным образом всё само заработало или добрые люди написали за него решение.

Ну что тут скажешь. Видимо, я сделал за кого-то чью-то работу. Но я с этой либой не работал, поэтому плюс мне идёт. Что касается человека, которые пытается пристроить этот slider, то там встроенный загрузчик, который можно использовать, но решил почему скомбинировать их два. Такие вот интересности

@Tempest999 · 13.07.2021, 20:25 **[ТС]**

благодарю за помощь, но у меня почему-то в общем количестве слайдов отображается больше или меньше, чем есть на самом деле, а их всего 4. Причем при перезагрузке страницы общее кол-во слайдов меняется каждый раз

Новые блоги и статьи Все статьи Все блоги /
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .
Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .	Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .

@Tempest999 0 / 0 / 0 Регистрация: 27.03.2018 Сообщений: 194
	13.07.2021, 20:25 [ТС]
	благодарю за помощь, но у меня почему-то в общем количестве слайдов отображается больше или меньше, чем есть на самом деле, а их всего 4. Причем при перезагрузке страницы общее кол-во слайдов меняется каждый раз Миниатюры 0

Опции темы