前言：
当前我们对“vue中如何使用swiper”都比较着重，小伙伴们都想要分析一些“vue中如何使用swiper”的相关文章。那么小编同时在网上汇集了一些有关“vue中如何使用swiper””的相关知识，希望看官们能喜欢，朋友们一起来学习一下吧！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’}},
标签： #vue中如何使用swiper
