vue-awesome-swiper@3.13 和 swiper@5.3.6 —组件内使用遇坑
- 使用vue-awesome-swiper的详细方法。
###下载
cnpm i swiper@5.3.6 -S
cnpm i vue-awsome-swiper@3.1.3 -S //建议版本
报错swiper/dist/css/swiper.css未找到(not found
-不存在swiper: 打开node_modules 文件下查看是否存在swiper 包模块,若不存在
cnpm i swiper@版本 -S
//建议版本低于5.0,对应vue-awesome-swiper版本3.1.3
- 存在swiper: 打开node_modules 文件下查看是否存在swiper 包模块,若存在则会发现dist文件不存在,则需要重新下载swiper,下载完成检查swiper/dist/css/swiper.css目录是否存在。
- swiper/dist不存在但是存在css/swiper.css和css/swiper.min.css,则可以在组件中修改引入模块文件路径
import 'swiper/dist/css/swiper.css' //修改为
import 'swiper/css/swiper.min.css' //即可正确引入
vue-awesome-swiper基本使用
- 组件中引入使用
<div class="swiper">
<swiper :options="swiperOption">
<swiper-slide>
<img src="http://img.tea7.com/0175360_0.jpeg"/>
</swiper-slide>
<swiper-slide>
<img src="http://img.tea7.com/0175360_0.jpeg"/>
</swiper-slide>
<swiper-slide>
<img src="http://img.tea7.com/0166434_0.jpeg"/>
</swiper-slide>
</swiper>
<!--以下看需要添加-->
<div class="swiper-pagination"></div> //分页器
</div>
import 'swiper/css/swiper.min.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
data() {
return {
//swiper3
swiperOption: {
loop:true,
autoplay: {
delay: 3000,
disableOnInteraction: false
},
pagination: {
el: '.swiper-pagination',
bulletElement : 'li',
hideOnClick: true, //点击轮播图显示隐藏分页器
clickable: true,//点击切换
},
},
};
},
components: {
swiper,
swiperSlide
}