【Swiper】片側だけ余白(画像)があるスライダーの作り方

Swiperで片側だけ余白があるスライダー作る方法ない？

片側だけ余白がある、もしくは片側だけスライドが見えているとも言えますが、こんな感じのスライダーです。

片側だけ余白があるスライダー

今回はSwiperでこのスライダーを作る方法を解説します。

Swiperの基本的な使い方についてはこちらの記事を参照下さい。

Swiperで片側だけ余白(画像)があるスライダーの作り方

まずは基本となるスライダーを見てみます。

See the Pen
Swiper（矢印、ドットインジケーター） by junpei (@junpei-sugiyama)
on CodePen.

前後の矢印、ページネーションが表示されているシンプルなスライダーです。

今回は片方に余白を作るので、矢印は削除しておきます。

コード解説

それではコードを解説していきます。

HTML

まずHTMLはこちらです。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="画像パス1" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="画像パス2" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="画像パス3" alt="" />
    </div>
  </div>
  <!-- ページネーション -->
  <div class="swiper-pagination"></div>
</div>

基本のスライダーから矢印のコードを削除しています。

あとデモではスライドは9枚にしています。

CSS

CSSはこちらです。

/* スライド全体の余白 */
.swiper {
  margin-top: 20px; /* スライダー上の余白 */
  padding-left: 10vw; /* スライダー左の余白 */
  padding-right: 20px; /* スライダー右の余白 */
}
/* スライド画像のサイズ */
.swiper-slide img {
  height: auto;
  width: 100%;
}

CSSは難しいコードはありませんが、ポイントは以下の2つです。

/* スライド全体の余白 */
.swiper {
  padding-left: 10vw; /* スライダー左の余白 */
  padding-right: 20px; /* スライダー右の余白 */
}

まずはデモで余白を作るのは左なので、padding-left: 10vw;で余白を作ります。

単位はvwにしていますが、ここは自由に変えてOKです（もちろん数値も）

padding-rightは設定しないと最後のスライドで横にピッタリくっついてしまうので今回は余白を作っていますが、無くても大丈夫です。

JavaScript

そしてJavaScriptはこちら。

const swiper = new Swiper(".swiper", {
  slidesPerView: 2.5, // スライド数
  spaceBetween: "2%", // スライド間の余白
  freeMode: true, // 前後のスライドで止まらずにスライド
  grabCursor: true, // カーソルを置いたときに指のカーソルを表示
  // ページネーション
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
});

spaceBetweenは設定しないとスライド同士がピッタリくっつきます（余白なし）

単位がpxならspaceBetween: 2,となり""は不要です。

あとは表示するスライド数をslidesPerViewで設定します。

これは小数点もOKで、2.5なら2枚半となります。

今回のような片側に余白を作る場合は、反対側のスライドは少し切れていた方がスライダーと分かるかと思います。