MENU▼

Swiper自定义分页样式

HTML:

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
    </div>
    <div class="tabs">
        <span class="active"></span>
        <span></span>
    </div>
</div>

JS:

var swiper = new Swiper('.swiper-container', {
    //swiper从当前slide开始过渡到另一个slide时执行(可删除,如删除,监听事件中的不能删除,都是为了添加active,自己取舍)
    onSlideChangeStart: function(){
        $(".tabs .active").removeClass('active');//删除当前分页器标签的active
        $(".tabs span").eq(swiper.activeIndex).addClass('active');//activeIndex为过渡后的slide索引,为过渡后的分页器标签添加active
    }
});

//监听分页器标签移动端触摸或PC端鼠标按下
$(".tabs span").on('touchstart mousedown',function(e){

    //可删除,如删除,上面的回调函数不能删除
    $(".tabs .active").removeClass('active');//删除全部分页器标签的active
    $(this).addClass('active');//添加触发当前分页器标签的active

    swiper.slideTo( $(this).index());//参数为当前触发的分页器标签位置,最低默认为0,和swiper索引对应
});

请为这篇文章评分:
( 这篇文章尚未评分 )
如果帮上忙了,赏po猪点小钱钱吧!