如何让Swiper JS同时显示派系分页和进度条？

Question

如何让带有进度条的进度条和幻灯片总数中当前幻灯片的数字显示同时显示？

由于默认情况下进度条和分页是不可能同时运行的，所以我在“分页”属性中添加了“type：'progressbar'”，为了幻灯片的数字显示我做了一个 .image-slider__fraction 块，我在其中放置了所有元素。然后我写了网上找到的java脚本代码，却报错“Uncaught ReferenceError: myImageSLider is not defined”。为什么？

站点ilyin1ib.beget.tech

代码https://jsfiddle.net/qav8z7f3/

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>

Answer 1

使用 slideChange event。该脚本没有给出实际的项目数，因为您在滑块内使用了循环。这就是为什么我在创建滑块脚本之前找到了项目的价值。

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

演示在 jsfiddle

如何让Swiper JS同时显示派系分页和进度条？

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

html

javascript

css

jquery

swiper.js