[JavaScript知识库]swiper在vue中正确的使用方法

swiper在vue中正确的使用方法
1.安装swiper，执行npm install vue-awesome-swiper@3.1.3 --save 命令

npm install vue-awesome-swiper@3.1.3 --save

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

import 'swiper/dist/css/swiper.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

3.在vue组件template部分添加

	<swiper :options="swiperOption">
      <swiper-slide>slide1</swiper-slide>
      <swiper-slide>slide2</swiper-slide>
      <swiper-slide>slide3</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数据里面:注意是data

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

5.具体参数参考swiper中文网
https://swiper.com.cn/api/index.html