Implementation of carousel diagram based on vue. js carousel component vue awesome swiper

1 When making mobile carousel maps, Swiper plug-in is most commonly used, and vue. js also has a carousel component vue-awesome-swiper, which is similar to swiper in usage.

1. Install vie-awesome-swiper

nam install vue-awesome-swiper --save-dev

2. Reference to the vie-awesome-swiper component, where I created the project with vie-cli, in main. js:

import VueAwesomeSwiper from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper) // Remember not to forget this sentence 

3. Use under Home. vue

<template>
<div>
<swiper :options="swiperOption" ref="mySwiperA">
  <!--  Slide content  -->
  <swiper-slide>slide1</swiper-slide>
  <swiper-slide>slide2</swiper-slide>
  <!--  The following control elements are optional  -->
  <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>
  <div class="swiper-scrollbar"  slot="scrollbar"></div>
</swiper>
</div>
</template>
<script>
  export default{
    data(){
      return {
        swiperOption: {
          //  All configurations are optional Swiper Configuration)  
          notNextTick: true,
          autoplay: 3000,
          grabCursor : true,
          setWrapperSize :true,
          autoHeight: true,
          pagination : '.swiper-pagination',
          paginationClickable :true,
          prevButton:'.swiper-button-prev',
          nextButton:'.swiper-button-next',
          scrollbar:'.swiper-scrollbar',
          mousewheelControl : true,
          observeParents:true,
          onTransitionStart(swiper){
           console.log(swiper)
          }
      }
    }
  },
  computed: {
    swiper() {
     return this.$refs.mySwiperA.swiper
    }
  },
  mounted() {
    console.log(" Every switch will trigger me ");
    this.swiper.slideTo(3, 1000, false)
   }
}
</script>