一個頁面多個swiper問題解決

  關於一個頁面中多處使用swiper而引發的翻頁問題

最近公司項目作了一個雙12活動，活動頁面中存在18個輪播！！！而後在進行swiper聲明的時候發現了問題，若是頁面只是有一兩個輪播，能夠直接給每個swiper-container 元素從新增長一個新類名，而後使用新類名進行聲明。

但如今頁面中一共存在18個輪播，若是要每一個都進行聲明，對代碼自己是一種冗餘。所以，須要換一種思路進行實現。初步設想對頁面中的swiper-container 元素進行遍歷聲明，然而事實說明，初始渲染頁面沒問題，可是當對其中一個輪播模塊進行手動翻頁以後當前輪播模塊的自動翻頁模塊就會失效。

解決辦法以下（頁面引用的swiper版本是3.3.1）：

代碼拿走不謝：

        $.extend({
            "swiperOption":function(f1,f2){
                new Swiper(f1, {
                    pagination: f2,
                    slidesPerView: 1,
                    centeredSlides: true,
                    paginationClickable: true,
                    loop:true,
                    autoplay: 2500,
                      autoplayDisableOnInteraction: false,
                });                 
            },
        });                       
        $(".swiper-container").each(function(index){
            $.swiperOption($(this),$(this).find(".swiper-pagination"));
        });