swiper两个轮播互相控制 / 做两个互相联系的轮播

html代码

<!-- 主要轮播 -->
        <div id="product-image-slides" class="swiper-container">
             <div class="swiper-wrapper">
                  <div class="swiper-slide" v-for="item in swiper">
                         <img :src="item">
                   </div>  
              </div>
        </div>
 <!-- 导航轮播 -->
         <div id="product-image-nav" class="swiper-container">
             <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in swiper">
                         <img :src="item">
                    </div>
              </div>
 <!-- 自定义翻页器-->
            <div class="swiper-prev"></div>
            <div class="swiper-next"></div>
        </div>

js代码

var imgSlide = new Swiper("#product-image-slides", {
    loop: false,
    centeredSlides: true,
    autoplay: {
        delay: 3000,
        disableOnInteraction: false
    },
    slidesPerView: 1,
    spaceBetween: 10,
    navigation: {
        nextEl: '#product-image-nav .swiper-next',
        prevEl: '#product-image-nav .swiper-prev',
    }
});

var galleryThumbs = new Swiper('#product-image-nav', {
    spaceBetween: 10,
    slidesPerView: 5,
    touchRatio: 0.2,
    loop: false,
});
imgSlide.controller.control = galleryThumbs;

// 点击缩略图 控制切换对应大图
    var objThumbs = $("#product-image-nav .swiper-wrapper .swiper-slide");
    var objTop = $("#product-image-slides .swiper-wrapper .swiper-slide");
    objThumbs.click(function(e) {
        var currentId = $(this).attr("data-image-index");
        for(var i = 0; i < objTop.length; i++) {
            if($(objTop[i]).attr("data-image-index") === currentId) {
                e.preventDefault();
                imgSlide.slideTo(i, 1000, false);
            }
        }
    })
},

注：代码是在vue框架下写的 不会vue的同学看一下结构也能明白 

在vue框架下 这个swiper的js代码写在mounted内