安装
引入
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "../../../node_modules/swiper/css/swiper.css";
注册组件
components: {
swiper,
swiperSlide
},
组件使用
<div class="banner_box">
<swiper ref="mySwiper" :options="swiperOptions4" v-if="imgList4.length > 0">
<swiper-slide v-for="(item, index) in imgList4" :key="index">
<img :src="item.imgUrl" alt="">
<div class="info">{{item.info}}</div>
</swiper-slide>
</swiper>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-next2"></div>
<div class="swiper-button-prev2"></div>
</div>
配置项
swiperOptions4: {
pagination: {
el: '.swiper-pagination',
clickable: true,
},
slidesPerView: 2,
slidesPerGroup: 2,
loop: true,
autoplay: {
delay: 3000
},
speed: 2000,
effect: "slide",
navigation: {
nextEl: '.swiper-button-next2',
prevEl: '.swiper-button-prev2',
}
},
样式修改
/deep/ .swiper-pagination-bullet-active {
background-color: #fff !important;
}
/deep/ .swiper-pagination-bullet {
width: 16px;
height: 4px;
border-radius: 5px;
background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
/deep/ .swiper-pagination-bullets {
bottom: 5px;
}
开启和关闭轮播
switchChange (e) {
this.flag= e;
this.$nextTick(() => {
if (e) {
this.$refs.mySwiper1.swiper.autoplay.start();
this.$refs.mySwiper2.swiper.autoplay.start()
} else {
this.$refs.mySwiper1.swiper.autoplay.stop();
this.$refs.mySwiper2.swiper.autoplay.stop();
}
})
}
效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/37153a47fd4450131e293ac05e540e37.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/eb4dbbf65061b3cd85bcb3b4a98a80aa.png)