Swiper js幻灯片计数器
[英]Swiper js slides counter
问题描述
有人可以帮忙吗？ 我的 swiper js 轮播需要一个滑动计数器，但这个计数器不起作用： https://codepen.io/pen/?template=wvzKBdW
例如，如果幻灯片总数为 8，则起始值将如下所示： Slides: 0/8 。 当一张幻灯片移动时，它变成幻灯片：1/8 ，依此类推。
我在 web 页面上找到了这个示例 Showing number of slides ，但它适用于旧版本的 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 个解决方案
解决方案1
0 2020-12-01 23:57:15
这是一种黑客行为......但在这里你是go......
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>
解决方案2
0 2020-12-02 00:05:44
编辑：
我认为使用完整代码而不是仅使用代码片段对您更有帮助。
这里是 go：
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';
}
}
})
解决方案3
0 2021-12-17 17:29:37
目前在 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",
},
});
解决方案4
0 2022-09-02 16:45:00
仅供参考，如果您使用无限循环 slider ，您需要从总数中扣除重复的幻灯片。
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);
希望这对某人有帮助
每个视图的 Swiper JS 幻灯片和每列的幻灯片显示不正确
[英]Swiper JS slides per view and slides per column displaying incorrectly
使用 swiper js 创建历史时间轴，每年有多张幻灯片
[英]using swiper js to create a history timeline with multiple slides in each year
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.