el-carousel
<el-carousel trigger="click" height="150px">
<el-carousel-item v-for="item in banner" :key="item.index" >
<img :src="item.IMG" />
</el-carousel-item>
</el-carousel>
缺点: 适用于pc浏览器 不适用于手机端 不能手动划动
swiper支持手机滑动(推荐)
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="item in banner" :key="item.index">
<img :src="item.IMG" /></swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
在data()函数中添加swiperOption参数
data() {
return {
swiperOption: {
loop: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false
},
// 显示分页
pagination: {
el: ".swiper-pagination",
clickable: true //允许分页点击跳转
},
// 设置点击箭头
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
}
}
}