轮播图插件
Vue-Awesome-Swiper
地址:https://github.com/surmon-china/vue-awesome-swiper
安装:npm install vue-awesome-swiper –save
局部引入:
import ‘swiper/dist/css/swiper.css’
import { swiper, swiperSlide } from ‘vue-awesome-swiper’
export default {
components: {
swiper,
swiperSlide
}
}
全局引入:
import Vue from 'vue'
import 'swiper/dist/css/swiper.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper);
使用方法:
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
data(){
return {
//设置属性
swiperOption:{
//显示分页
pagination: {
el: '.swiper-pagination',
clickable:true
},
//切换模式 横屏或者竖屏
// direction : 'vertical',
//设置自动播放速度
autoplay: {
disableOnInteraction: false,
delay:4000
},
//开启无限循环
loop:true,
//设置点击箭头
paginationClickable :true,
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next',
//设置同屏显示的数量,默认为1,使用auto是随意的意思。
slidesPerView:1,
//开启鼠标滚轮控制Swiper切换。可设置鼠标选项,或true使用默认值。
mousewheel:true ,
//默认为false,普通模式:slide滑动时只滑动一格,并自动贴合wrapper,设置为true则变为free模式,slide会根据惯性滑动可能不止一格且不会贴合。
// freeMode:true
}
}
},
components:{
swiper,
swiperSlide
}
}
</script>
注意:我使用的vue-awesome-swiper版本是2.5.4的,,通过“npm install vue-awesome-swiper@2.5.4 –save”即可安装,千万记住不要直接”npm install vue-awesome-swiper –save”,不然装了一个高版本,你会发现很多问题.
而我的问题就是左右按钮点击不能滑动
版本换了,所以肯定不能用swiper4以上的那一套API去看,所以我们要降级到swiper3版本的,所以vue-awesome-swiper的分页的配置应该如下: