How to make Swiper JS display faction pagination and progress bar at the same time?

user_16336417 0
Viewed 3386

How to make it so that the progress bar with the progress line and the numeric display of the active slide from the total number of slides are displayed simultaneously?

Since by default the simultaneous operation of the progress bar and pagination with a fraction is impossible, I added "type: 'progressbar'" in the "pagination" properties, and for the numeric display of slides I made an .image-slider__fraction block in which I placed all the elements. Then I wrote java script code that I found on the Internet, but I get an error "Uncaught ReferenceError: myImageSLider is not defined". Why?

Site 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

use slideChange event. The script does not give the actual number of items because you used the loop inside the slider. That's why I found the value of the items before creating the slider script.

var totalSlide = $('.image-slider .swiper-slide').length;
const swiper = new Swiper('.image-slider', {
  // Optional parameters
  slidesPerView: 3,
  spaceBetween: 30,
  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,
  }
});
//var count = $('.image-slider .image-slider__slide').length;


swiper.on('slideChange', function() {
  var fragment = document.querySelector('.image-slider__current');
  var current = swiper.realIndex + 1;
  if (current > totalSlide)
    current = 1;
  var idx = current < 10 ? ("0" + current) : current;
  var tdx = totalSlide < 10 ? ("0" + totalSlide) : totalSlide;
  fragment.innerHTML = (idx + '/' + tdx);
});

demo in jsfiddle

user_150195360
Related