萌新小白 发表于 2018-11-29 15:27:32

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>




MatthewKuo 发表于 2018-11-29 16:24:48

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

admin2 发表于 2018-11-29 19:05:00

1111111111
页: [1]
查看完整版本: swiper4.0，Thumbs，缩略图控制轮播怎么弄