【Swiper】上下複数行のグリッドスライダーの作り方

Swiperで上下複数行のスライダーってどうやって作るの？

今回はSwiperを使って上下複数行gridレイアウトのスライダーの作り方を解説します。

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

Swiperで上下複数行のグリッドスライダーの作り方

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

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

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

これを元に2種類のスライダーを作ってみますが、注意点が2つあります。

loopは設定しない → 変な動きになる
スライドは偶数にする→ 上下にするので、奇数だと空のスライドが出来る

空のスライドが出来てもいい場合はスライドの枚数は奇数でも構いません。

2行・1列のスライダー

まずは2行・1列のスライダーです（左上の『HTML・CSS・JS』をクリックすると見やすいです）

See the Pen
Swiper（グリッドスライダー：上下2枚） by junpei (@junpei-sugiyama)
on CodePen.

CSS

CSSはこちらです。

.swiper {
  height: 106vw;
  width: 80%;
}
.swiper-slide {
  height: 50%;
}
.swiper-slide img {
  height: auto;
  width: 100%;
}

.swiperでスライダー全体の高さと幅を指定しますが、ここはレスポンシブになるようにvwや%で指定しています。

.swiper-slideは2行にしているので高さを半分にしています。

.swiper-slide imgに関しては基本形と同じです。

JavaScript

JavaScriptはこちらです。

const swiper = new Swiper(".swiper", {
  grid: {
    rows: 2,
  },
  // ページネーション
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  // 前後の矢印
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

基本形と違うのはgridだけです。

3行にしたい場合はrows: 3,にすればOKですが、CSSでheightの調整も忘れないようにしましょう。

2行・2列のスライダー

次は2行・2列のスライダーです。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

CSS

CSSはこちらです。

.swiper {
  height: 53vw;
  width: 80%;
}
.swiper-slide {
  height: 50%;
}
.swiper-slide img {
  height: auto;
  width: 100%;
}

1列の時と全体の高さが変わっただけです。

JavaScript

JavaScriptはこちらです。

const swiper = new Swiper(".swiper", {
  slidesPerView: 2,
  grid: {
    rows: 2,
  },
  // ページネーション
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  // 前後の矢印
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

1列の時と違うのはslidesPerView: 2,だけです。

ここで通常のスライド枚数(列)を指定します。

そしてgridで行の枚数を指定するので、上下左右2枚ずつのスライダーが出来ます。