swiper在vue中正确的使用方法
Posted yang-hui
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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‘ } },
以上是关于swiper在vue中正确的使用方法的主要内容,如果未能解决你的问题,请参考以下文章