关于swiper如何将左右按钮放置到container外面不被隐藏-526互联

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>