單個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;

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

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

這個簡單的效果 希望可以幫助你們。謝謝~~~

如何給兩個swiper建立關系