【Swiper】
ナビゲーションをスライドの外に
設置するには？2つの小技メモ

手軽に高品質なスライダーが実装できる java script ライブラリ「Swiper」！

すぐに実装できるスライダーも便利ですが、必要に応じてカスタマイズをすると、もっと便利に使うことができますね。

ここでは、「Swiper」の基本的なスライダーにある「ナビゲーション」を、スライドの外側に設置する方法を2つほどまとめています。

HTMLとCSSだけで簡単に実装できますよ！

Swiperでナビゲーションを
スライドの外に設置する方法1

「Swiper」のナビゲーションをスライドに重ねずに表示するのは、実はCSS指定だけで簡単に実装できます。

まずは今回使う「Swiper」の基本的なスライダーコードを確認してみましょう。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="1.png" alt=""></div>
    <div class="swiper-slide"><img src="2.png" alt=""></div>
    <div class="swiper-slide"><img src="3.png" alt=""></div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

ごくごく基本的なスライダーですが、ここでは分かりやすいように、ページネーション要素とスクロールバー要素は削除してあります。

そして、CSS指定はこちら！

.swiper{
  width: 320px;
  text-align: center;
}
.swiper-slide img{
  width: 200px;
}
/*
指定サンプル
.swiper-button-prev,
.swiper-button-next{
  top: 10px;
}
*/

「Swiper」の基本的なスライダーでは、「swiper-slide」内のスライド要素がスライダーエリアいっぱいに表示されます。

また、「Swiper」のナビゲーションは、スライダーからはみ出した部分は表示されない仕様なので、単に位置を変更するだけだと見切れてしまいます。

そこで、「swiper-slide」内のスライド要素（ここではimg要素）の幅をスライダーの表示幅よりも小さくすることで、ナビゲーションとの間に余白をもたせる、というのがこちらの方法です。

あとは、お好みでナビゲーションの位置を「top,bottom,left,right」や「padding」で調整すれば完成です。

Swiperでナビゲーションを
スライドの外に設置する方法2

「Swiper」のナビゲーションをスライドに重ねずに表示したい場合、上記の方法でもCSSだけで簡単に実装できますが、また違った実装をすることもできます。

先に見た方法ではナビゲーションはスライダーの中にあるので、スライドが切り替わる時にナビゲーションの下を通過します。

こちらは、ナビゲーションを文字通りスライダーの外に設置しているので、スライドがナビゲーションの下を通過していないのが分かると思います。

こちらの実装コードはこちら！

まずはHTMLでスライダー全体を追加要素で囲み、ナビゲーション要素を「swipe」要素の外に移動します。

<div class="swiper-box">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="1.png" alt=""></div>
      <div class="swiper-slide"><img src="2.png" alt=""></div>
      <div class="swiper-slide"><img src="3.png" alt=""></div>
    </div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

このままだとナビゲーションが飛んでいってしまうので、CSSで追加要素に「position: relative」を指定して、ナビゲーションを追加要素内に表示しています。

あとは、お好みで位置を調整すれば完成です！

.swiper-box{
  width: 320px;
  margin: 0 auto;
  position: relative;
}
.swiper-box .swiper{
  width: 200px;
}
/*
指定サンプル
.swiper-box .swiper-button-prev,
.swiper-box .swiper-button-next{
  top: 10px;
}
*/

こちらの方法の場合は、文字通りナビゲーションをスライダーの外に設置することで、スライドの外側にナビゲーションを表示することができる、というわけですね！

ちなみに「Swiper」のページネーションなども、同様の方法でスライドの外側に移動させることができます。

必要に応じてカスタマイズしていきましょう♪