1

有人可以帮忙吗？我的 swiper js 轮播需要一个幻灯片计数器，但这个计数器不起作用： https ://codepen.io/pen/?template=wvzKBdW

例如，如果幻灯片总数为 8，则起始值将如下所示： Slides: 0/8。当一张幻灯片移动时，它变成幻灯片：1/8，依此类推。

我找到了这个例子Showing number of slides on the web page，但它适用于旧版本的 swiper js，我找不到使用swiper js 最新版本的方法。在我的 codepen 中有我需要的版本。

谢谢！

var mySwiper = new Swiper('.swiper-container', {
  // Optional parameters
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
  runCallbacksOnInit: true,
  onInit: function(sw){
    var offer = document.querySelector('#numberSlides');
    offer.innerHTML = (sw.activeIndex +  1) + '/' + sw.slides.length + 'Offers';
  },
  onSlideChangeEnd: function(sw){
    var offer = document.querySelector('#numberSlides');
    offer.innerHTML = (sw.activeIndex +  1) + '/' + sw.slides.length + 'Offers';
  }
})
.swiper-container {
    width: 600px;
    height: 300px;
}

#numberSlides{
  position: absolute; 
  bottom: 0;
  left: 0;
  z-index: 9999;
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <div id="numberSlides">
      0/0 Offers
    </div>
</div>

4

3 回答 3

0

目前在 Swiper.js 中存在 fn 分页类型：分数，示例：

HTML(pug)
.swiper-container
  .swiper-wrapper
    ... slides
  .swiper-pagination

JS:
const swiper = new Swiper('.swiper-container', {
  pagination: {
    el: ".swiper-pagination",
    type: "fraction",
  },
});
于 2021-12-17T17:29:37.187 回答
0

编辑：

我认为使用完整代码而不是仅使用代码片段对您更有帮助。

干得好：

var slides_count = document.getElementsByClassName("swiper-slide"); // <- add this
var mySwiper = new Swiper('.swiper-container', {
  // Optional parameters
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
  runCallbacksOnInit: true,
  // === new change
  on: {
    slideChange: function(){
        var offer = document.querySelector('#numberSlides');
        offer.innerHTML = (this.activeIndex +  1) + '/' + slides_count.length + 'Offers';
    }
  }
})
于 2020-12-02T00:05:44.383 回答
0

这有点像黑客...但是给你...

var mySwiper = new Swiper('.swiper-container', {
  // Optional parameters
  loop: true,
  initialSlide: 0,
  watchSlidesProgress: true,
  watchSlidesVisibility: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  }
})

function change(){
  var offer = document.getElementById('numberSlides');
  offer.innerHTML = (mySwiper.realIndex +  1) + '/' + (mySwiper.slides.length - 2)+ 'Offers';
}

change();
document.getElementById("prev").addEventListener("click", change);
document.getElementById("next").addEventListener("click", change); 
.swiper-container {
    width: 600px;
    height: 300px;
}

#numberSlides{
  position: absolute; 
  bottom: 0;
  left: 0;
  z-index: 9999;
}
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - A Pen by Peter K Joseph</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div id="prev" class="swiper-button-prev"></div>
    <div id="next" class="swiper-button-next"></div>

    <div id="numberSlides">
      0/0 Offers
    </div>
</div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

于 2020-12-01T23:57:15.790 回答