我写了一个自定义滑块,如下面的codepen所示:
http://codepen.io/anon/pen/NqQpjG
我添加了额外的功能,计算幻灯片的总数被移动。例如,如果幻灯片总数为8,则起始值如下所示:Slides: 0/8
。当一张幻灯片移动时,它变成Slides: 1/8
,依此类推。下面是我的代码:
<div>
<span id="numberSlides">0/0 Offers</span>
</div>
JS
var slide = new slide('.swiper-slide', {
var totalSlides = 10;
var newSlide = document.getElementsByClassName('swiper-slide');
var newValue = newSlide + 1;
document.getElementById('numberSlides').innerHTML = newValue + "/" + totalSlides + " Slides";
});
但它不起作用。如何显示移动的幻灯片数量?
编辑:
我的幻灯片是在这些divs
:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
2条答案
按热度按时间vuv7lop31#
使用此属性
Demo
h43kikqp2#
100% swiper API解决方案(适用于循环true -or- false &页面上有多个swiper)。
如果你想使用自己的元素。
而不是使用自己的逻辑/计算
total-slides
-干净的解决方案是得到幻灯片的总数beforeInit(在dupluaction幻灯片)。a.当前幻灯片
使用
realIndex + 1
(因为这是零基索引=> 0 ==第一张幻灯片)并更新slideChange by innerHTML属性上的计数器。B.幻灯片总数
beforeInit
-事件将在初始化之前触发(在刷卡器复制幻灯片之前)https://swiperjs.com/swiper-api#event-beforeInitwrapperEl - vanilla HTMLEementelement with slider wrapper HTML element.
比querySelectorAll(Vanilla js)
this
(swiper.wrapperEl)swiper-slide
length属性。代码片段
type:fraction
https://swiperjs.com/api/#pagination
Swiper API
type: fraction
分页:例如
renderFraction
: