使用vue-awesome-swiper方法

在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>