vue3.2使用Swiper8，将左右箭头放container外部

思路

因为左右箭头是用position定位来决定位置的，所以我们只需要在Swiper外层包一层div，并设置position: relative;。

再为swiper设置position: static; ，因为absolute不会根据static进行移动。

最后给外部盒子来个内边距就ok了为左右箭头挤出位置就OK了

html

<div class="swiper-box page-width">
  <swiper
      :grabCursor="true"
      :slidesPerView="3"
      :spaceBetween="50"
      :slidesPerGroup="3"
      :loop="true"
      :loopFillGroupWithBlank="true"
      :pagination="{
        clickable: true,
      }"
      :navigation="true"
      :modules="[Pagination,Navigation]"
      class="inSwiperBox"
  >
    <swiper-slide>
        1
    </swiper-slide>
    <swiper-slide>
        2
    </swiper-slide>
    ....
  </swiper>
</div>

css

.inSwiperBox {
  height: 100px;
  margin-top: 60px;
  position: static;
}

.swiper-box {
  height: 500px;
  position: relative;
  padding: 0 50px;

  .swiper {
    width: 100%;
    height: 100%;
  }
}