<!-- 左侧导航栏 -->
          <!-- Swiper -->
          <div class="swiper-container gallery-modle thumb-modle">
            <div class="swiper-wrapper">
              <div class="swiper-slide swiper-items flexcc" data-index="1">电气工程师 </div>
              <div class="swiper-slide swiper-items flexcc" data-index="2">自动化工程师</div>
              <div class="swiper-slide swiper-items flexcc" data-index="3">PLC程序员</div>
              <div class="swiper-slide swiper-items flexcc" data-index="4">售后工程师</div>
              <div class="swiper-slide swiper-items flexcc" data-index="5">调试工程师</div>
            </div>
          </div>

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

var galleryThumbs;//左边缩略图swiper
var postSwiper;//右边轮播的swpier

hover触发跳转--核心代码

  // 鼠标移入轮播
  $(".swiper-items").hover(function (e) {
    // 取到绑定在swiper-items上的data-index
    console.log(e.currentTarget.dataset.index);
    let indexTo = e.currentTarget.dataset.index;
    // 然后调用swiper的postSwiper.slideTo(index, speed, runCallbacks)
    postSwiper.slideTo(indexTo, 500, false); //切换到第一个slide，速度为1秒
  }, function () {
    // 鼠标移出回复自动轮播
    postSwiper.autoplay.start();
  });

详细代码

  var galleryThumbs = new Swiper('.thumb-modle', {
    spaceBetween: 0,
    slidesPerView: 6,
    freeMode: true,
    loop: false,
    // grabCursor: true, //手型
    watchSlidesVisibility: true,
    watchSlidesProgress: true,
  });
  var postSwiper = new Swiper('.postInfoSwiper', {
    slidesPerView: 1,
    spaceBetween: 30,
    effect: "coverflow", //默认就是slide位移,fade淡入淡出,cube3d方块,coverflow 3d流
    loop: true,
    grabCursor: true, //手型
    autoplay: {
      delay: 3000, //自动播放速度
      disableOnInteraction: false //鼠标移上去时是否还继续播放
    },
    autoplay: false,
    thumbs: {
      swiper: galleryThumbs,
    }
  });