swiper的使用

1.swiper的引用

到官网 Swiper中文网-轮播图幻灯片js插件,H5页面前端开发Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。Swiper中文网提供Swiper在线演示、Swiper中文教程、Swiper中文APi、Swiper下载。https://www.swiper.com.cn/下载压缩包,下载完以后解压，压缩包里有两个文件是需要用到的，swiper-bundle.css 和 swiper-bundle.js

（1）在html中引用方式

(2)在vue中的引用方式

 

<script>
import Swiper from '@/tools/swiper-bundle.min.js'
import '@/tools/swiper-bundle.min.css'
</script>

 2.swiper的使用

使用分为三个部分，分别是html，css,js。

 

html部分：

<div class="swiper">
    <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 class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

js部分： 

<script>        
  var mySwiper = new Swiper ('.swiper', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
  </script>

vue中的js写法需要把代码封装进一个方法中，在页面加载时执行这个方法。需要注意的是，如果轮播图中的内容是用v-for动态生成的需要使用this.$nextTick(function(){})

实例代码：

 

methods:{
    swiperReady(){
        this.$nextTick(function(){
            var firstSwiper = new Swiper ('.firstSwiper', {
                  slidesPerView:1, //每次轮播显示的个数
                  autoplay:false,  // 是否自动轮播
                  direction: 'horizontal', // 方向切换选项
                  loop: true, // 循环模式选项
                  // 如果需要前进后退按钮
                  navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                  },
                   // 缩略图
                  thumbs:{
                    swiper:mySwiper,
                  }
              })
        })
    }
}
mounted(){
    this.swiperReady()
}

 在轮播图中要想实现轮播图的效果，需要使用两个轮播图：

1.在html中准备两个swiper，类名不同有所区分。

2.在js中初始化两个swiper。

              
              var mySwiper = new Swiper ('.swiper', {
                freeMode: true,
                    // 此项必填
        watchSlidesProgress: true,
                  slidesPerView:5,
                  autoplay:false,
                  direction: 'horizontal', // 方向切换选项
                  loop: true, // 循环模式选项
                  
              })
              var firstSwiper = new Swiper ('.firstSwiper', {
                  slidesPerView:1,
                  autoplay:false,
                  direction: 'horizontal', // 方向切换选项
                  loop: true, // 循环模式选项
                  // 如果需要前进后退按钮
                  navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                  },
                  thumbs:{
                    swiper:mySwiper,
                  }
              })
          },

（1）设置缩略图的watchSlidesProgress:true

（2）设置大图的thumbs：{ swiper: 冒号后写缩略图的名字mySwiper。}

（3）若要设置分页在缩略图上，只需要在缩略图的html中写下分页按钮代码，而大图绑定分页按钮。若要设置分页在大图，则将html中的分页按钮代码，放在大图的html中。

 css根据自己需要进行调整，但必须有个高和宽为基础容器：

 

.swiper {
    width: 600px;
    height: 300px;
}  

或者参考swiper官网实例310