Why doesn't the number of the active slide change in Swiper JS in pagination with a fraction?

user_16336417 0
Viewed 1005

I have an .image-slider__fraction block that I tried to set up to display the number of the active slide from the total number of slides, but for some reason in the javascript it gives me the error "Uncaught ReferenceError: myImageSLider is not defined", but I don't understand why

Site http://ilyin1ib.beget.tech/ Code https://jsfiddle.net/qav8z7f3/

enter image description here

 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;
    });
<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>

swiper.js css html jquery javascript
1 Answers

You can achieve it like this. https://jsfiddle.net/zoymLphf/

Use swiper API methods. Counting the total number of slides is kinda tricky when you use loop mode, maybe there is a more elegant solution for this.

const swiper = new Swiper('.image-slider', {
    // Optional parameters
    slidesPerView: 3,
    on: {
      init: function(sw) {
        $('.image-slider__total').text($('.swiper-slide:not(.swiper-slide-duplicate)').length)
        $('.image-slider__current').text(sw.realIndex + 1)
      },
      slideChange: function (sw) {
        $('.image-slider__current').text(sw.realIndex + 1)
      },
    },
    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,
    }
});
user_29830610
Related