2020年6月18日

swiper在vue中正确的使用方法


swiper是网页中非常强大的一款轮播插件,说是轮播插件都不恰当,因为它能做的事情太多了,swiper在vue下也是能用的,需要依赖专门的vue-swiper插件,因为vue是没有操作dom的逻辑的,所以写法大不一样,下面附swiper在vue中正确的使用方法

1.安装swiper,执行npm install vue-awesome-swiper –save命令

2.在main.js中添加下面三行

import ‘swiper/dist/css/swiper.css’
import VueAwesomeSwiper from ‘vue-awesome-swiper’
Vue.use(VueAwesomeSwiper)
3.在html部分添加

<swiper :options=”swiperOption”>
<swiper-slide>slide1</swiper-slide>
<swiper-slide>slide2</swiper-slide>
<div class=”swiper-pagination” slot=”pagination”></div>
<div class=”swiper-button-prev” slot=”button-prev”></div>
<div class=”swiper-button-next” slot=”button-next”></div>
</swiper>
4.将下面js部分添加到data里面

swiperOption: {
pagination: {
el: ‘.swiper-pagination’,
clickable: true // 允许点击小圆点跳转
},
autoplay: {
delay: 3000,
disableOnInteraction: false // 手动切换之后继续自动轮播
},
loop: true,
navigation: {
nextEl: ‘.swiper-button-next’,
prevEl: ‘.swiper-button-prev’
}
},

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732

标签: