vue-awesome-swiper 实现轮播图:方法2（个人实战）

我用的是：

    "swiper": "^5.4.2",  #一定要用这个版本，用6.x很难用,最好用这个，安装命令 cnpm install swiper@5.4.2 -S

    "vue-awesome-swiper": "^4.1.1"   # 安装命令cnpm install  vue-awesome-swiper -S

使用导入 swiper 和 SwiperSlide 实现

main.js全局引入

import VueAwesomeSwiper from 'vue-awesome-swiper' //引入vue swiper(1)
// import style (<= Swiper 5.x)//引入vue swiper(2)
import 'swiper/css/swiper.css'//引入vue swiper(3)
Vue.use(VueAwesomeSwiper) //引入vue swiper(4)

html:

<template>
  <swiper :options="swiperOption">
    <swiperSlide class="swiper-wrapper" v-for="item in list" :key="item.id">
      <div class="swiper-slide">
        <img class="swiper-img" :src="item.img">
      </div>
    </swiperSlide>
    <div class="swiper-pagination" slot="pagination"></div> <!-- slot一定需要 -->
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  export default {
    data () {
      return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination',
          },
          autoplay:true, //自动轮播
          loop:true, //这样可以从最后一张切到第一张，配合下面this.mySwiper.slideTo 使用

        }
      }
    },
    components:{
      Swiper,
      SwiperSlide
    },
    mounted() {
      console.log('Current Swiper instance object', this.mySwiper)
      this.mySwiper.slideTo(1, 1000, true) //从第一张开始，1秒轮播
    },
    props:{
      list:{
        type:Array
      }
    }
  }
</script>

<style scoped>
.swiper-img{
  width: 100%;
  height: 3.6rem;
}

</style>