如何給兩個swiper創建關係

單個swiper已經知足不了需求了。

各類花式輪播已經慢慢進入市場。swiper該如何立足，那麼請看。

<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div  class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
                <div class="swiper-slide">Slide 10</div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>

作兩個swiper輪播，樣式視狀況自定。

分別爲兩個swiper輪播作入配置參數，

var galleryTop = new Swiper('.gallery-top', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 10,    //每一個slide 的間距
        loop:true,
        loopedSlides: 5, //looped slides should be the same 
        preventsDefault:false,   //幹掉默認阻止的事件
        observer:true,          //初始化子元素
        observerParents:true,    //初始化父元素
    });

爲第二個swiper輪播作入配置參數。

 var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        slidesPerView: 6,
        touchRatio: 0.2,
        loop:true,
        loopedSlides: 5, //looped slides should be the same
        slideToClickedSlide: true,
        preventsDefault:false,
        observer:true,
        observerParents:true,
    });

關鍵來了，給兩個對象創建鏈接

galleryTop.params.control = galleryThumbs;
    galleryThumbs.params.control = galleryTop;

這樣 實現的效果點擊下面的圖片，上面的圖片也變化，

反過來 點擊上面的圖片，下面的小圖片也變化。

這個簡單的效果 但願能夠幫助大家。謝謝~~~