PCではスライドを3枚表示していたけど、スマホでは1枚にしたいといったケースがあると思います。
それにはslickのオプションを使ってブレイクポイントを指定すれば、スライドの表示枚数を変えることが出来ます(ブレイクポイントは複数指定できます)
今回はコピペ可能なコードとデモを使って解説していきます。
slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。
レスポンシブ対応のスライダープラグイン slickの使い方
続きを見る
【初心者向け】jQueryとは?CDNを使った本体の読み込み方も分かりやすく解説
続きを見る
またslickには色々カスタマイズが出来るオプションがあるので、そちらも合わせて活用すると実装出来るスライダーの幅が広がります。
【slick】カスタマイズ用オプションまとめ一覧
続きを見る
- 完全無料
- 30日間でWeb制作を学べる
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 毎日人数制限ありの先着制
(有料になっていたらすいません🙇♂️)
レスポンシブ対応のslickを使ってブレイクポイントでスライドの表示枚数を変える方法
slickのオプションでブレイクポイントを指定する事が出来ますが、そのブレイクポイントで設定出来るのは枚数だけではありません。
まずはスライドの表示枚数を変更する方法、次にスライドをフェードに変えてみたいと思います。
スライドの表示枚数をPCでは3枚、指定したブレイクポイントで1枚に変更
まずは完成形を見てみます。
See the Pen
slick(レスポンシブ) by junpei (@junpei-sugiyama)
on CodePen.
パソコンの場合は画面幅を狭くするか、左上のHTMLやCSSをクリックすれば3枚から1枚になるのが確認出来ると思います。
コード解説
HTMLとCSSは特に変わった点はないので省略します。
jQueryはこのようになっています。
$(function () {
$(".slider").slick({
arrows: false,
autoplay: true,
adaptiveHeight: true,
dots: true,
slidesToShow: 3,
responsive: [
{
breakpoint: 400, // 399px以下のサイズに適用
settings: {
slidesToShow: 1,
},
},
],
});
});
ポイントとなるのは2か所です。
slideToShow | 表示するスライド数(初期値:1) |
responsive | レスポンシブのブレイクポイントを設定してオプションを切り替える(初期値:none) |
slideToShowは2か所にありますが、最初の3と設定しているのが基本となる表示枚数。
そしてresponsive内のsettingsにある方が設定したbreakpointより小さくなった時の表示枚数です。
ブレイクポイントは複数設定可能
先ほど設定したブレイクポイントは1ヵ所でしたが、以下のように複数設定することも可能です。
$(function () {
$(".slider").slick({
slidesToShow: 4,
responsive: [
{
breakpoint: 1024, // 768〜1023px以下のサイズに適用
settings: {
slidesToShow: 3,
},
},
{
breakpoint: 768, // 480〜767px以下のサイズに適用
settings: {
slidesToShow: 2,
},
},
{
breakpoint: 480, // 〜479px以下のサイズに適用
settings: {
slidesToShow: 1,
},
},
],
});
});
表示枚数以外も変更可能
先ほどのコードを必要な箇所だけ切り取って見てみます。
$(function () {
$(".slider").slick({
slidesToShow: 3,
responsive: [
{
breakpoint: 400, // 399px以下のサイズに適用
settings: {
slidesToShow: 1,
},
},
],
});
});
このsettingsの中に変更したいオプションを追記可能です。
変えられるのは表示枚数だけではないって事ですね。
試しに表示枚数だけでなく、スライドの種類をフェードになるように変更してみます。
するとこのようになります。
$(function () {
$(".slider").slick({
slidesToShow: 3,
responsive: [
{
breakpoint: 400, // 399px以下のサイズに適用
settings: {
fade: true,
slidesToShow: 1,
},
},
],
});
});
こちらが完成形です、またHTMLやCSSをクリックしてスライドを1枚にすればフェードの確認が可能です。
See the Pen
slick(レスポンシブ:フェード切り替え) by junpei (@junpei-sugiyama)
on CodePen.
まとめ
今回はslickでブレイクポイントによってスライドの表示枚数を変える方法を解説しました。
表示枚数以外にも色々と変更できるので、ぜひ試してみて下さい。
以上になります。
関連記事slick記事一覧
関連記事Swiper記事一覧
関連記事Splide記事一覧