Swiper的種種踩坑與解決方案

由於各個項目關係，需要實現各種輪播，使用了強大的Swiper插件，由於功能太多，使用的時候踩了很多坑，下面記錄踩的各種坑及其解決方案。

1. 翻頁按鈕和分頁器在框外

默認情況下 Swiper 翻頁按鈕和分頁器在輪播內容框區域內。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="slide-content">Slide 1</div>
    </div>
    <div class="swiper-slide">
      <div class="slide-content">Slide 2</div>
    </div>
    <div class="swiper-slide">
      <div class="slide-content">Slide 3</div>
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

想實現翻頁按鈕在其區域外，其實並不難。
**解決思路：**在.swiper-container外層加一個相對定位的父標籤，將翻頁按鈕和分頁器移至.swiper-container外層。

<div class="layout-container"><!-- 新增外層標籤 -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="slide-content">Slide 1</div>
      </div>
      <div class="swiper-slide">
        <div class="slide-content">Slide 2</div>
      </div>
      <div class="swiper-slide">
        <div class="slide-content">Slide 3</div>
      </div>
    </div>
  </div>
  <!-- 移至外層 -->
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

.layout-container {
  padding-bottom: 0 50px 20px 50px;
  position: relative;
}

實現效果：