今回はそんな疑問にお答えします。
PCではスライドを3枚表示していたけど、スマホでは1枚にしたいといったケースがあると思います。
今回はslickのオプションを使ってブレイクポイントを指定し、スライドの表示枚数を変える方法について解説していきます。
slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。
レスポンシブ対応のスライダープラグイン「slick」の使い方
またslickには色々カスタマイズが出来るオプションがあるので、そちらも合わせて活用すると実装出来るスライダーの幅が広がります。
効率よくコーディングしたい人はこちら
レスポンシブ対応の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.
以上になります。
Brainランキング1位獲得 ＆ 3日で500部突破 クチコミ約300件 今だけ！5つの無料特典あり🎁 👇画像をクリック
コーディング案件の単価と作業効率を上げる！
（平均スコア）
