tab切換中嵌套swiper輪播

今天在做官網的時候需要用到swiper多圖輪播的功能，但是得嵌套在tab切換中，就在我把磚都搬完后，發現了個問題，就是我在進行tab切換后，發現原本設置的swiper的自動輪播竟然失效了，而且樣式也是亂的，只有第一項是正常的，這時我就在網上進行地毯式的搜索，找了好半天也沒找到解決的方案，於是自己就索性去研究了下，把我的解決方法展示在這里，僅供參考

1、針對tab切換樣式直接亂掉的問題

// 在配置中添加這兩個屬性
啟動動態檢查器(OB/觀眾/觀看者)，當改變swiper的樣式（例如隱藏/顯示）或者修改swiper的子元素時，自動初始化swiper。
默認false
observer: true,
// 將observe應用於Swiper的祖先元素。當Swiper的祖先元素變化時，例如window.resize，Swiper更新。
observeParents: true,

2、切換后無法自動輪播

// 我們需要對tab中的每個swiper進行實例化，也就是說，你有幾個swiper就要實例化幾次swiper,比如下面這個代碼
var swiper1 = new Swiper('.swiper-container1', {
    slidesPerView: 6,
    spaceBetween: 10,
    loop: true,
    autoplay: 3000
});
var swiper2 = new Swiper('.swiper-container2', {
    slidesPerView: 6,
    spaceBetween: 10,
    loop: true,
    autoplay: 3000
});
…………

/**
 * 當然，我們不能這么寫，我們可以給這個實例化的swiper進行封裝下，請看示例：
 @params index 點擊tab切換對應的索引值，每次切換的時候調用下這個方法，然后傳個當前的索引過來，需要注意 的是這個方法要先在onload中執行下，不然你剛進入頁面就會有問題了，然后就是你的索引是從0開始的哦，然后就ok啦
 */
function createSwiper(index) {
    var swiper = new Swiper('.swiper' + index, {
        // 根據瀏覽器寬度決定一屏顯示幾個
        slidesPerView: mInnerWidth > 768 ? 6 : 3,
        spaceBetween: 10,
        loop: true,
        autoplay: 3000,
        // tab切換失效bug解決
        observer: true,
        observeParents: true,
        // 抓手圖標
        grabCursor: true
    });
    return swiper;
}