swiper自定义分页器使用方法

<script>        
    var mySwiper = new Swiper ('.swiper-container', {
        direction:"horizontal",/*横向滑动*/
        loop: true,  //设置为true 则开启loop模式
        autoplay: true,  //设置为true启动自动切换,并使用默认的切换设置
        speed: 300,  //切换速度,即slider自动滑动开始到结束的时间(单位ms),也是触摸滑动时释放至贴合的时间
        autoplay: {
            disableOnInteraction: false,//手势滑动过之后,依然可以重启轮播的属性     
        },ide

        // 若是须要分页器
        pagination: {
            el: '.swiper-pagination',
            type: 'custom',
            renderCustom: function (swiper, current, total) {
                var customPaginationHtml = "";
                for(var i = 0; i < total; i++) {
                    //判断哪一个分页器此刻应该被激活
                    if(i == (current - 1)) {
                        customPaginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
                    } else {
                        customPaginationHtml += '<span class="swiper-pagination-customs"></span>';
                    }
                }
                return customPaginationHtml;
            }
        },
        
    });        
    </script>oop

相关文章
相关标签/搜索