swiper插件怎么设置鼠标经过缩略图标切换图片

<div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide active-nav" data-index="0">
                            <img src="./common/images/s1.jpg" alt="">
                        </div>
                        <div class="swiper-slide" data-index="1">
                            <img src="./common/images/s2.jpg" alt="">
                        </div>
                        <div class="swiper-slide" data-index="2">
                            <img src="./common/images/s3.jpg" alt="">
                        </div>
                        <div class="swiper-slide" data-index="3">
                            <img src="./common/images/s4.jpg" alt="">
                        </div>
                        <div class="swiper-slide" data-index="4">
                            <img src="./common/images/s5.jpg" alt="">
                        </div>
                        <div class="swiper-slide slide6" data-index="5">
                            <img src="./common/images/s6.jpg" alt="">
                        </div>
                    </div>
  </div>

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

// 解决鼠标悬浮切换效果
$(".preview .swiper-slide").hover(function (e) {
    // 取到绑定在indexP-swiper-items上的data-index
    // console.log(e.currentTarget.dataset.index);
    var indexTo = e.currentTarget.dataset.index;
    viewSwiper.swipeTo(indexTo, 1000, false);
    $(this).addClass("active-nav").siblings().removeClass("active-nav");
}, function () {
    // 鼠标移出后恢复自动轮播
    viewSwiper.startAutoplay();
})

swipeTo方法：
滑动到到指定滑块。
index:必选，num，指定将要切换到的slide的索引，第一个为0
speed:可选，num(单位ms)，切换速度
runCallbacks:可选，boolean，设置为false时不会触发onSlideChange回调函数。