swiper如何實現輪播嵌套輪播

之因此要寫這篇文章是由於插件有個bug，要改掉這個bug比較麻煩，因此就想了個折中的辦法，繞過這個限制，方法千萬條，功能幹出來第一條，哈哈

最近作了個需求，效果圖是這樣的

第一個框是大輪播，第二個框是嵌套輪播，相信看到這種需求頭都大，其實仔細一點的話也沒什麼問題就是煩了點，這裏就不上代碼了，具體看後面連接

之因此寫這篇文章，主要是說明碰到的一個問題，按下面這段代碼，最後一個大輪播的嵌套輪播始終異常

var mySwiper = new Swiper('.s2',{
            autoplay : 2000,
            onlyExternal: true,
            loop: true,
            onSlideChangeStart: function(swiper){
                switchTab(swiper.activeLoopIndex);
            }
        })

因爲輪播要求循環，就必須涉及到loop屬性，遺憾的是這裏不能用，不然最後一個輪播的子輪播就會出問題，要麼是初始化不成功，要麼是pagenagition無效，總之必定會出點問題，解決方法以下

var mySwiper = new Swiper('.s2',{
            autoplay : 2000,
            onlyExternal: true, // 禁用鼠標拖拉
            // loop: true, // 輪播嵌套的時候必須去掉這個，不然最後一個輪播的嵌套輪播異常
            onSlideChangeStart: function(swiper){
                switchTab(swiper.activeLoopIndex);
                // 下面這段代碼用於解決loop屬性不能使用的問題
                if(swiper.activeLoopIndex == 3) {
                    mySwiper.stopAutoplay();
                    setTimeout(function () {
                        $nav.eq(0).trigger("click")
                        mySwiper.startAutoplay();
                    }, 2000)

                }
            }
        })

禁用loop，改成手動循環

具體代碼請移步：swiper輪播嵌套

PS：

爲了兼容IE8，這裏用的是swiper 2.X版本，連接是一個原型，你們自行修改