我用的是:
"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>