vue使用swiper实现轮播图

(记录学习的过程) 

1.安装插件

npm install vue-awesome-swiper@3.1.3 --save

npm install swiper@6.3.5 --save

2.main.js中引入

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
Vue.use(VueAwesomeSwiper)

3. 

<swiper :options="swiperOption" class="swiper-container swiper-pagination1"  ref="mySwiper">
        <!-- 添加的图片 -->
        <swiper-slide>
            <img class="banner-img" src="../../assets/main.png" :style="{width:'150px',height:'80px'}"/>
         </swiper-slide>
        <swiper-slide>
             <img class="banner-img" src="../../assets/main.png" :style="{width:'150px',height:'80px'}"/>
        </swiper-slide>
    
        <!-- 指示点 -->
        <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>
    </swiper>

 4.return里面添加

swiperOption: {
                 pagination: '.swiper-pagination1',
                 slidesPerView: 1,
                 spaceBetween: 30,
                 centeredSlides: false,
                 spaceBetween: 0,
                 onSlideChangeEnd: swiper => {
                   //放swiper的回调方法
                   this.page = swiper.realIndex+1;
                   this.index = swiper.realIndex;
                 },
                 //左右导航栏
                 navigation: {
                   nextEl: '.swiper-button-next',
                   prevEl: '.swiper-button-prev',
                 },
                 //自动播放
                 autoplay:{
                   delay:2000,
                   disableOnInteraction:false
                 },
                 //指示点
                 pagination: {
                   el: '.swiper-pagination',
                   clickable: true,
                 },
                 //循环
                 loop:true
               },

 5.

 computed: {
          swiper() {
            return this.$refs.mySwiper.swiper;
          }
        },


 mounted(){
      
         
         this.swiper.slideTo(0, 0, false);

         }  ,