最近项目中需要实现轮播图效果,对比了几个轮播图插件之后,个人觉得vue-awesome-swiper比较方便好用,用法如下:
1、npm导入对应的包:
npm install vue-awesome-swiper --save
2、main.js中添加:
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
3、向需要使用轮播图的vue文件中添加
<swiper :options="swiperOption" class="swiper-container swiper-pagination" ref="mySwiper">
<!-- 添加的图片 -->
<swiper-slide><img class="index_img" src="../index/img1.jpg" /> </swiper-slide>
<swiper-slide><img class="index_img" src="../index/img2.jpg"/> </swiper-slide>
<swiper-slide><img class="index_img" src="../index/img3.jpg"/> </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、向需要使用轮播图的vue文件中的script标签中添加:
require('swiper/dist/css/swiper.css');
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
pagination: '.swiper-pagination',
slidesPerView: 1, //用到的loop个数
spaceBetween: 30,
centeredSlides: false,
spaceBetween: 0,
//循环播放
loop:true,
//自动播放
autoplay{
delay:3000,
disableOnInteraction:false
}
// 回调方法
onSlideChangeEnd: swiper => {
this.page = swiper.realIndex+1;
this.index = swiper.realIndex;
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
}
}
},