如何让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中的演示