今回はSwiperを使って上下複数行gridレイアウトのスライダーの作り方を解説します。
Swiperの基本的な使い方についてはこちらの記事を参照下さい。
【2024年最新Ver11】Swiperの使い方とよく使うオプション・カスタマイズ方法を解説
続きを見る
またSwiperには色々カスタマイズが出来るオプションがあるので、そちらも合わせて活用すると実装出来るスライダーの幅が広がります。
【Swiper】カスタマイズ用オプションまとめ一覧
続きを見る
- 完全無料
- 30日間でWeb制作を学べる
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 毎日人数制限ありの先着制
(有料になっていたらすいません🙇♂️)
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枚ずつのスライダーが出来ます。
まとめ:Swiperでグリッドスライダーを作るには『gird』で『rows』を使おう
Swiperでグリッドスライダーを作るにはモジュール(オプション)のgird
を使いますが、スライダー全体の高さやスライドの高さを設定するのを忘れないようにしましょう。
以上になります。
関連記事slick記事一覧
関連記事Swiper記事一覧
関連記事Splide記事一覧