swiper4.0，Thumbs，缩略图控制轮播怎么弄

萌新小白

本人时萌新，最近刚接触vue项目，要在其中做一个类似淘宝图片展示物品的那种，就是缩略图轮播，官网API文档我看得不太懂，希望大神赐教，以下为代码，使用不了
<div class="swiper-container" id="thumbs">
    <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>
  </div>

  <div class="swiper-container" id="gallery">
    <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>
  </div>

  <script src="./js/swiper.js"></script>

  <script>
    var gallerySwiper = new Swiper('#gallery', {
      spaceBetween: 10,
      thumbs: {
        swiper: {
          el: '#thumbs',
          spaceBetween: 10,
          slidesPerView: 4,
          watchSlidesVisibility: true,/*避免出现bug*/
        },
      }
    })
  </script>

admin2

1111111111

MatthewKuo

建议你先去看下vue-awesome-swiper的使用，在来官网看配置文档，API。