vue 使用 swiper

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

安装：

        npm i swiper@3.4.2     

 

引入：

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

 

使用：

 1  <div class="swiper-container">
 2       <div class="swiper-wrapper">
 3          <div class="swiper-slide"
 4           v-for="(item,index) in imgList"
 5          :key="index">
 6            <img :src="item.img"  alt="" />
 7          </div>
 8       </div>
 9       <div class="swiper-pagination"></div>
10  </div>
11 
12  
13 // 接下来在mounted中插入
14 mounted(){
15     this.swiper = new Swiper('.swiper-container', {
16          pagination: '.swiper-pagination',
17          loop: true, // 循环
18          spaceBetween: 20, // swiper-slide 间的距离为0
19          autoplay: 8000, // 自动切换时间间隔
20          speed: 1000, // 滑动速度
21          prevButton: '.swiper-button-prev',
22          nextButton: '.swiper-button-next'
23      })
24 }

 

大概效果图：

 

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

 

posted @ 2022-08-19 14:09  Naynehcs  阅读(415)  评论(0)  编辑  收藏  举报