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

相關文章
相關標籤/搜索