可以在每个" swiper-pagination-switch"中显示幻灯片的编号。跨度 ? (如:1,2,3,......)?
默认情况下,插件会创建HTML的一部分,如下所示:
<div class="pagination">
<span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span></div>
</div>
我想在每个跨度中插入与之相关的幻灯片数量,如下所示:
<div class="pagination">
<span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch">1</span>
<span class="swiper-pagination-switch">2</span>
<span class="swiper-pagination-switch">3</span></div>
</div>
我怎么能这样做?
感谢。
答案 0 :(得分:7)
在Swiper v3.3.1中有Demo,它可以适合你的问题29-custom-pagination.html,它包含在下载的zip中:
选项:
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
paginationBulletRender: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
}
答案 1 :(得分:2)
这是我的解决方案,有点脏,但它可以完成这项工作:
var Swiper_slider = slider.swiper({
pagination: '.slider_pagination',
paginationClickable: true,
mode: 'horizontal',
loop: true,
speed: 600,
autoplay: 5000,
paginationElement: 'a',
onSwiperCreated: function(){
$('.slider_pagination a').each(function( key ){
$(this).html( key + 1 );
});
}
});
创建滑块后,.each()
循环会在分页元素上添加数字。
的Yannick
答案 2 :(得分:1)
Swiper v3.1.0将具有以下参数,该参数支持此功能。
paginationBulletRender(index, className)