vue中使用swiper插件实现自定义切换按钮
vue中使用swiper插件实现自定义切换按钮安装引入全局引入局部引入使用html代码其他功能如有需要自行添加如有不足请多多指教安装安装swiper插件//npm安装npm install swiper vue-awesome-swiper --save//yarn安装yarn add swiper vue-awesome-swiper//cnpm安装npm install swiper vue-
·
安装
安装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',//某些情况下需要隐藏前进后退按钮时,可以设定一个自定义的类名。
}
更多推荐
已为社区贡献1条内容
所有评论(0)