关于swiper如何将左右按钮放置到container外面不被隐藏
1、将swiper-button-prev和swiper-button-next放置到swiper-container下一级
2、在swiper-container外面再套一层盒子swiper-box
3、swiper-box设置position:relative,并且去掉swiper-container的定位position:unset
4、调整swiper-button-prev和swiper-button-next的top left这些 就可以了
<div class="swiper-box"> <div v-swiper:myswiper="myswiper" class="swiper-container" ref="myswiper"> <div class="swiper-wrapper"> <!-- swiper slide --> <div class="swiper-slide" v-for="(item, index) in list" :key="index"> <div class="list-item"> {{item}} </div> </div> </div> <template> <!-- 上一项 --> <div class="slideshow-btn swiper-button-prev"></div> <!-- 下一项 --> <div class="slideshow-btn swiper-button-next"></div> <!-- 分页圆点 --> <div class="swiper-pagination"></div> </template> </div> </div>
<style> .swiper-box { position: relative; } .swiper-container { position: unset; } .swiper-wrapper { position: unset; } .slideshow-btn { top: 50%; } .swiper-pagination { bottom: 0; } </style>