Swiper中文论坛

标题: swiper4.0，Thumbs，缩略图控制轮播怎么弄 [打印本页]

作者: 萌新小白 时间: 2018-11-29 15:27
标题: 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
建议你先去看下vue-awesome-swiper的使用，在来官网看配置文档，API。

作者: admin2 时间: 2018-11-29 19:05
1111111111

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)