vue 使用 swiper

 swiper版本很多，使用起来也是各种各样的报错，下面是个人使用swiper3的步骤，目前来说感觉比较好用的

安装：

        npm i swiper@3.4.2     

 

引入：

// 直接把文件引入到页面中，（如果引入报错的去node_modules文件中查找一下具体文件路径即可） 
 import Swiper from "swiper" 
 import 'swiper/dist/css/swiper.css'

 

使用：

 <div class="swiper-container">
      <div class="swiper-wrapper">
         <div class="swiper-slide"
          v-for="(item,index) in imgList"
         :key="index">
           <img :src="item.img"  alt="" />
         </div>
      </div>
      <div class="swiper-pagination"></div>
 </div>

 
// 接下来在mounted中插入
mounted(){
    this.swiper = new Swiper('.swiper-container', {
         pagination: '.swiper-pagination',
         loop: true, // 循环
         spaceBetween: 20, // swiper-slide 间的距离为0
         autoplay: 8000, // 自动切换时间间隔
         speed: 1000, // 滑动速度
         prevButton: '.swiper-button-prev',
         nextButton: '.swiper-button-next'
     })
}

 

大概效果图：

 

更多配置选项可查阅官网： https://3.swiper.com.cn/api/index.html