有人能帮忙吗？我需要一个滑动计数器为我的滑动js旋转木马，但这个计数器不起作用：https://codepen.io/pen/?template=wvzKBdW
例如，如果幻灯片总数为8，则起始值如下所示：幻灯片：0/8。当一张幻灯片移动时，它变成幻灯片：1/8，依此类推。
我发现这个例子显示了网页上的幻灯片数量，但它适用于较旧版本的swipper js，我找不到使用swipper-js最新版本的方法。在我的代码笔里有我需要的版本。
谢谢！
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>目前在Swiper.js中存在fn分页类型：fraction，示例：
HTML(pug)
.swiper-container
.swiper-wrapper
... slides
.swiper-pagination
JS:
const swiper = new Swiper('.swiper-container', {
pagination: {
el: ".swiper-pagination",
type: "fraction",
},
});
这有点像黑客。。。但给你。。。
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>编辑：
我认为使用完整的代码会对您更有帮助，而不仅仅是一个片段。
给你：
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';
}
}
})
如果使用循环滑块，则需要从总数中扣除重复的幻灯片。
var slides_count = document.getElementsByClassName("swiper-slide");
var slides_count_dup = document.getElementsByClassName("swiper-slide-duplicate");
total.innerHTML = (swiper.realIndex + 1) + ' / ' + (slides_count.length - slides_count_dup.length);