vue adds vue-awesome-swiper carousel component

npm install vue-awesome-swiper --save

import Vue from 'vue'
//mount swiperimport VueAwesomeSwiper from 'vue-awesome-swiper';
(VueAwesomeSwiper);

<swiper :options="swiperOption" ref="mySwiper">
 <!-- slides -->
 <swiper-slide>I'm Slide 1</swiper-slide>
 <swiper-slide>I'm Slide 2</swiper-slide>
 <swiper-slide>I'm Slide 3</swiper-slide>
 <swiper-slide>I'm Slide 4</swiper-slide>
 <swiper-slide>I'm Slide 5</swiper-slide>
 <swiper-slide>I'm Slide 6</swiper-slide>
 <swiper-slide>I'm Slide 7</swiper-slide>
 <!-- Optional controls -->
 <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>

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  name: '',
 data() {
   return {
     swiperOption: {
       // NotNextTick is a component's own property, and if notNextTick is set to true, the component will not instantiate the swiper through NextTick, which means you can get the swiper object the first time (if you need to use the get swiper object to do what Things, then this property must be true)
       // notNextTick is a component's own attribute. If notNextTick is set to true, the component will not instantiate swiper through NextTick, which means you can get the swiper object as soon as possible. If you need to use the swiper object to do something just loaded, then this attribute must be true       notNextTick: true,
       // Swiper configs All configurations are the same as Swiper official API configuration       autoplay: 3000,
       // direction : 'vertical',
       effect:"coverflow",
       grabCursor : true,
       setWrapperSize :true,
       // autoHeight: true,
       // paginationType:"bullets",
       pagination : '.swiper-pagination',
       paginationClickable :true,
       prevButton:'.swiper-button-prev',
       nextButton:'.swiper-button-next',
       // scrollbar:'.swiper-scrollbar',
       mousewheelControl : true,
       observeParents:true,
       // if you need use plugins in the swiper, you can config in here like this
       // If you design the plug-in yourself, some configuration-related parameters of the plug-in should also appear in this object, as follows debugger       // debugger: true,
       // swiper callbacks
       // Various callback functions of swiper can also appear in this object, just like swiper official       // onTransitionStart(swiper){
       //   (swiper)
       // },
       // more Swiper configs and callbacks...
       // ...
     }
   }
 },components: {
 swiper,
 swiperSlide
},
 // you can find current swiper instance object like this, while the notNextTick property value must be true
 // If you need to get the current swiper object to do something, you can define a method property like below to get the current swiper object, and notNextTick must be true computed: {
   swiper() {
     return this.$
   }
 },
 mounted() {
   // you can use current swiper instance object to do something(swiper methods)
   // Then you can use the swiper object in the current context to do what you want to do   // ('this is current swiper instance object', )
   // (3, 1000, false)
 }
}

@import'../src/style/';

<div class="banner-wrap"   v-if=''> 
        
        <swiper :options="swiperOption" ref="mySwiper" >
            <swiper-slide v-for='(item,index) in bannerList' :key = 'index'>
                <div class="img-box">
                  <img :src="" alt="">
                </div>
            </swiper-slide> 
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
      </div>

  swiperOption: {
      loop:true,
      autoplay:{
          disableOnInteraction: false,
          delay: 2000,
      },
      pagination: {
          el:'.swiper-pagination',
          clickable:true,
          // type:"bullets",
         
      },
      autoplayDisableOnInteraction: false,
  },