vue中使用swiper插件实现自定义切换按钮
安装
安装swiper插件
//npm安装 npm install swiper vue-awesome-swiper --save //yarn安装 yarn add swiper vue-awesome-swiper //cnpm安装 npm install swiper vue-awesome-swiper --save
引入
全局引入
在main.js中引入
import Vue from vue import VueAwesomeSwiper from vue-awesome-swiper//引入插件 import swiper/dist/css/swiper.css//引入css样式 Vue.use(VueAwesomeSwiper)//使用
局部引入
在需要的文件引入 在script标签下
import swiper/css/swiper.css
import {
Swiper} from vue-awesome-swiper
使用
components: {
Swiper
},
data() {
return {
swiperOption: {
//循环 实现无限切换
loop: true,
navigation: {
//下一张
nextEl: .btn-right,//下一张标签类名可以自定义
//上一张
prevEl: .btn-left//上一张标签类名可以自定义
}
},
},
}
html代码
<swiper :options="swiperOption" class="swiper-wrapper" ref="mySwiper">
<swiper-slide><img src="../assets/banner1.jpg" /> </swiper-slide>
<swiper-slide><img src="../assets/banner2.jpg"/> </swiper-slide>
<swiper-slide><img src="../assets/banner3.jpg"/> </swiper-slide>
<swiper-slide><img src="../assets/banner4.jpg"/> </swiper-slide>
</swiper>
<div class="btn-left"></div>//翻页 根据标签名实现翻页可自定义样式位置
<div class="btn-right"></div>//翻页 根据标签名实现翻页可自定义样式位置
其他功能 如有需要自行添加
watchOverflow:true,//当没有足够的slide切换时，例如只有1个slide（非loop），swiper会失效且隐藏导航。
grabCursor : true,//设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。
effect : slide,//切换效果：默认为“位移切换”。
loop : true,//让Swiper看起来是循环的。
autoplay: {
//启动自动切换，具体选项如下：
delay: 3000,//自动切换的时间间隔，单位ms
stopOnLastSlide: false,//如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。
disableOnInteraction: false,//用户操作swiper之后，是否禁止autoplay。默认为true：停止。
},
// 如果需要分页器，类名要和 HTML 中的相对应
pagination: {
el: .swiper-pagination,//自动隐藏
clickable :true,
},
//如果需要前进后退按钮，类名要和 HTML 中的相对应
navigation: {
nextEl: .swiper-button-next,//自动隐藏
prevEl: .swiper-button-prev,//自动隐藏
hiddenClass: btn-hidden,//某些情况下需要隐藏前进后退按钮时，可以设定一个自定义的类名。
}
