我用的是:
"swiper": "^5.4.2", #一定要用这个版本,用6.x很难用,最好用这个,安装命令 cnpm install [email protected] -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>