在main.js中引入轮播图插件
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
Vue.use(VueAwesomeSwiper);
在基础组件中建立轮播图组件：
<template>
<swiper :options="swiperOption">
<swiper-slide v-for="(slide, index) in swiperSlides" :key="index">I'm Slide {{ slide }}</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
<script>
export default {
name: 'carousel',
data() {
return {
swiperOption: {
autoplay:true,
setWrapperSize:true,
observeParents:true,
pagination: {el:'.swiper-pagination'},
paginationClickable: true,
loop: true,
observer:true,
autoplayDisableOnInteraction : false,
},
swiperSlides: [1, 2, 3, 4, 5]
}
}
}
</script>
