例えばPCではスライドの枚数を3枚にして、スマホでは1枚にしたい時があったとします。
そのためにはブレイクポイントを設定すれば対応可能です。
Swiperの基本的な使い方についてはこちらの記事を参照下さい。
-
【jQuery不要】スライダープラグイン Swiper.jsの使い方
続きを見る
今だけ！5大無料特典あり🎁
Swiperでブレイクポイントを設定してレスポンシブ対応のスライダーを作る方法
まずは基本となるスライダーを見てみます。
See the Pen
Swiper（矢印、ドットインジケーター） by junpei (@junpei-sugiyama)
on CodePen.
前後の矢印、ページネーションが表示されているシンプルなスライダーです。
今回はコードを見やすくする為にページネーションは削除したいと思います。
まずは画面幅500px以上でスライド3枚、500px未満でスライド1枚になるようにしてみます。
画面幅は500px未満にするか、左上のHTML、CSS、JSをクリックして画面幅を狭くしてみて下さい（クリックすると500px未満になるという意味です）
こちらがそのスライダーになります。
See the Pen
Swiper（ブレイクポイント設定） by junpei (@junpei-sugiyama)
on CodePen.
HTMLとCSSは特に変わったところはないので、JavaScriptだけコードを見てみます。
const swiper = new Swiper(".swiper", {
loop: true,
// 前後の矢印
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// スライドの表示枚数：500px未満の場合
slidesPerView: 1,
breakpoints: {
// スライドの表示枚数：500px以上の場合
500: {
slidesPerView: 3,
}
}
});最初に見た基本となるスライダーと違うのは、スライドの表示枚数の設定です。
まずは基本となる表示枚数を設定します。
ブレイクポイントで設定するのは◯◯px以上の処理なので、基本となる表示枚数はそれ以下となります。
なので上記で言えば500px未満のスライド数でslidesPerView: 1,となります（スライド1枚）
そしてbreakpointsでブレイクポイントを設定し、設定したpx以上の場合の処理を書きます。
上記の場合だと「500px以上の場合にスライド3枚表示」となります。
ブレイクポイントを複数設定
先ほどはブレイクポイントが1つでしたが、複数設定する場合は以下のようになります。
const swiper = new Swiper(".swiper", {
loop: true,
// 前後の矢印
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// スライドの表示枚数：600px未満の場合
slidesPerView: 1,
breakpoints: {
// スライドの表示枚数：600px以上の場合
600: {
slidesPerView: 2,
},
// スライドの表示枚数：768px以上の場合
768: {
slidesPerView: 3,
},
// スライドの表示枚数：1025px以上の場合
1025: {
slidesPerView: 4,
},
},
});こちらがデモになります。
See the Pen
Swiper（ブレイクポイント複数でスライド数変更） by junpei (@junpei-sugiyama)
on CodePen.
これはブログ上では最大で2枚しか表示されないので、右上のCodePenのロゴをクリックしてページを開くと分かりやすいかと思います。
今回はブレイクポイントでスライドの枚数を変えましたが、スライドの枚数以外の設定も出来るという事は覚えておきましょう。
関連記事slick記事一覧
関連記事Swiper記事一覧
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
今だけ！5大無料特典あり🎁
