npm install vue-awesome-swiper --save //基于vue使用的轮播组件
<template>
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(banner,index) in banners" :key="index">
<img v-if="banner.src" :src="banner.src">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
require('swiper/dist/css/swiper.css')
export default {
data () {
return {
banners: [{ src: require('../img/1.jpg') }, { src: require('../img/4.jpg') }, { src: require('../img/5.jpg') }],
swiperOption: {
notNextTick: true,
autoplay: 1000,
pagination: '.swiper-pagination',
paginationClickable: true,
mousewheelControl: true,
observeParents: true,
onSlideChangeEnd: swiper => {
this.page = swiper.realIndex + 1
this.index = swiper.realIndex
}
}
}
},
components: {
swiper,
swiperSlide
}
}
</script>
<style>
.swiper-slide{
margin-top: 10px;
height: 230px;
}
.swiper-slideimg {
width: 100%;
height: 100%;
}
</style>