vue-awesome-swiper 实现轮播图(个人实战)

我用的是:

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

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

 

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>
  <div v-swiper:mySwiper="swiperOption">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img class="swiper-img" src="https://oss.suning.com/adpp/creative_kit/material/picture/20201204-24bde29e5d114ba2adaf5916ffd45f9a375160a054bb4b90.jpg">
      </div>
      <div class="swiper-slide">
        <img class="swiper-img" src="https://oss.suning.com/adpp/creative_kit/material/picture/20201204-5505b0a4656c4cc6b0c4cb6dcffc40b6b0d4bbedd35b4f0a.jpg?format=_is_1242w_610h">
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          },
          autoplay:true, //自动轮播

        }
      }
    },
    mounted() {
      console.log('Current Swiper instance object', this.mySwiper)
      this.mySwiper.slideTo(0, 1000, false) //从第一张开始,1秒轮播
    }
  }
</script>

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

</style>

 

 

上一篇:swiper 封装


下一篇:执行 npm install --save swiper/css/swiper.css 失败解决方案