页面:
<div class="swiper-container swiper3">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in newsTextLists" :key="index">
<a v-if="item.url && item.url !== ''" target="_blank" :href="item.url">
<div class="homeSec02Lwrap">
<el-image
style="width: 100%; height: 100%"
:src="item.thumb1"
fit="cover"
class="homeSec02Limg">
</el-image>
</div>
</a>
</div>
</div>
</div>
<div class="swiper-button-prev swiper-button-white swiper_btn"></div> // 上一张按钮
<div class="swiper-button-next swiper-button-white swiper_btn"></div> // 下一张按钮
</div>
mounted(){
this.swiper3start()
}
方法:
methods: {
swiper3start(){
this.$nextTick(() => {
new Swiper('.swiper3', {
loop: true,
loopAdditionalSlides : 1,
autoplay: 3000,
speed: 1000,
observer: true,
observeParents: true,
observeSlideChildren: true,
autoplayDisableOnInteraction: false,
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next',
})
});
}
}
样式:
.swiper3 {
height: 80px;
width:100%;
}
/* 按钮样式 */
.swiper3 .swiper-button-next,
.swiper3 .swiper-button-prev {
margin: 0 10px;
width:34px;
height: 56px;
top: 185px;
background-color: rgba(0, 0, 0, 0.2);
background-size: 10px;
}
效果: