vue 项目使用swiper插件

vue 项目使用swiper插件

1.安装插件

npm install vue-awesome-swiper -save 或者 yarn add vue-awesome-swiper

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 // 手动切换之后继续自动轮播
　　},
　　autoplay: {
       delay: 3000,
       disableOnInteraction: false, // 手动切换之后继续自动轮播
   },
   slidesPerView: 5, //设置slider容器能够同时显示的slides数量(carousel模式)。
   grabCursor: true,//小手掌抓取滑动
   loop: true,
　　navigation: {
　　　　nextEl: '.swiper-button-next',
　　　　prevEl: '.swiper-button-prev'
　　}
},

注意在引入插件的时候可能会报

找不到 swiper/dist/css/swiper.css 让你npm install --save swiper/dist/css/swiper.css

原因是 vue-awesome-swiper版本过高，低版本swiper不兼容

解决方法:可以直接在package.json里面修改版本为，然后重新下载依赖就好了

"vue-awesome-swiper": "^3.1.3",