swiper鼠标经过切换对应轮播图

    

      

        这里是缩略图
      
      

       这里是缩略图
      
      

        这里是缩略图
      
    

以上为缩略图部分的代码，swiper部分不需要任何改变。上面代码注释加了一个data-index，绑定到了dom元素上，不会用的自行度娘去。data-index用来当鼠标移入时候获取到它的值，然后传递给swiper的slideTo(index, speed, runCallbacks)方法，具体见slideTo详解，以下为js代码

var mySwiper = new Swiper("#gallery-top", {
      loop: true,
      autoplay: {
         delay: 3000,
         stopOnLastSlide: false,
         disableOnInteraction: false,
      },
      thumbs: {
        swiper: {
          el: "#gallery-thumbs",
          spaceBetween: 10,
          slidesPerView: 3,
          watchSlidesVisibility: true
          /*避免出现bug*/
        },
        slideThumbActiveClass: "my-slide-thumb-active"
      }
    });
    $(".indexP-swiper-items").hover(function(e) {
      // 取到绑定在indexP-swiper-items上的data-index
      console.log(e.currentTarget.dataset.index);
      let indexTo = e.currentTarget.dataset.index;
      // 然后调用swiper的mySwiper.slideTo(index, speed, runCallbacks)
      mySwiper.slideTo(indexTo, 1000, false); //切换到第一个slide，速度为1秒
    },function(){
      // 鼠标移出回复自动轮播
      mySwiper.autoplay.start();
    });