slick を使ったスライダーの作り方
カルーセルを簡単にサイトページに表示させることができるslickプラグインの使い方メモです。slick はレスポンシブ対応はもちろん、豊富なオプションがあるのでさまざまなスライダー表示ができます。いろいろなスライダーが作れるので、どんな時にどういう設定をすればいいかをメモしていきます。
【カルーセルとは】
カルーセルとは画像などの複数の項目をスライドさせることで、メインで表示する項目を切り替えることができる仕組みである。画像をスライドさせる動きがメリーゴーラウンドのように回転する動作から、カルーセルと呼ばれている。
カルーセルとは | DAC Solution Service目次
Toggleslick の導入
slick をサイトに導入するには、基本のファイルをダウンロードもしくはCDNでの読み込みも利用できます。
slick のダウンロードはこちらから
slick は jQuery を使用しているので jQuery の読み込みも必須です。jQuery の後、 </body> タグの前に slick.js を追加します。<head> 内では slick.css, slick-theme.css を読み込みます。
HTML<head> <link rel="stylesheet" href="slick/slick.css"> <link rel="stylesheet" href="slick/slick-theme.css"> </head> <body> <script src="https://code.jquery.com/jquery-3.7.0.js"></script> <script src="https://code.jquery.com/jquery-migrate-3.4.1.js"></script> <script type="text/javascript" src="slick/slick.min.js"></script> </body><head> <link rel="stylesheet" href="slick/slick.css"> <link rel="stylesheet" href="slick/slick-theme.css"> </head> <body> <script src="https://code.jquery.com/jquery-3.7.0.js"></script> <script src="https://code.jquery.com/jquery-migrate-3.4.1.js"></script> <script type="text/javascript" src="slick/slick.min.js"></script> </body>上記はslickをダウンロードしたときのコードです。CDNの場合はsrcをCDNリンクに変更してください。
基本の使い方
まず最低限のスライダーを実装すると以下のような形になります。
HTML<head> <link rel="stylesheet" href="slick/slick.css"> <link rel="stylesheet" href="slick/slick-theme.css"> </head> <body> <div class="slider_class"> <div>スライド01</div> <div>スライド02</div> <div>スライド03</div> </div> <script src="https://code.jquery.com/jquery-3.7.0.js"></script> <script src="https://code.jquery.com/jquery-migrate-3.4.1.js"></script> <script src="slick/slick.min.js"></script> <script> $('.slider_class').slick(); </script> </body><head> <link rel="stylesheet" href="slick/slick.css"> <link rel="stylesheet" href="slick/slick-theme.css"> </head> <body> <div class="slider_class"> <div>スライド01</div> <div>スライド02</div> <div>スライド03</div> </div> <script src="https://code.jquery.com/jquery-3.7.0.js"></script> <script src="https://code.jquery.com/jquery-migrate-3.4.1.js"></script> <script src="slick/slick.min.js"></script> <script> $('.slider_class').slick(); </script> </body>最低限必要なのは、ファイルの読み込み・スライドさせる要素・$('スライドさせるコンテンツの親要素のクラス').slick(); の記述です。スライドさせる要素にCSSを追加すれば、これだけでも十分なこともあります。
しかしそれだけでは物足りない場合も多いです。そこで .slick(); のコードにオプションを設定してスライドをカスタムしていきます。
slickを使う際のマークアップの注意ulタグ、liタグを使ってマークアップしている場合もありますが、これだと出力されるHTML構造がおかしくなります。
例えば以下のようなコーディングで、スライダーを作る場合。
HTML<ul class="slider_class"> <li class="slide_item">スライド01</li> <li class="slide_item">スライド02</li> <li class="slide_item">スライド03</li> </ul><ul class="slider_class"> <li class="slide_item">スライド01</li> <li class="slide_item">スライド02</li> <li class="slide_item">スライド03</li> </ul>slickでは自動生成される要素があるため、ulタグの直下にdivタグやbuttonタグなど本来ulタグの下には入れないような要素が入ってしまいます。
【出力されるHTML構造の例】
HTML<ul class="slider_class slick-initialized slick-slider"> <button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="">Previous</button> <div class="slick-list draggable"> <div class="slick-track"> <li class="slide_item slick-slide slick-cloned">スライド01</li> <li class="slide_item slick-slide slick-current slick-active">スライド02</li> <li class="slide_item slick-slide">スライド03</li> </div> </div> <button class="slick-next slick-arrow" aria-label="Next" type="button" style="">Next</button> </ul><ul class="slider_class slick-initialized slick-slider"> <button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="">Previous</button> <div class="slick-list draggable"> <div class="slick-track"> <li class="slide_item slick-slide slick-cloned">スライド01</li> <li class="slide_item slick-slide slick-current slick-active">スライド02</li> <li class="slide_item slick-slide">スライド03</li> </div> </div> <button class="slick-next slick-arrow" aria-label="Next" type="button" style="">Next</button> </ul>通常ulタグを使う際にこのようなマークアップはしません。liタグの中にはさまざまなタグを使用することができるのですが、ulタグの入れ子構造としてはliタグのみとなっているので、出力されるものは構造的におかしいものになってしまいます。
＜ul＞: 順序なしリスト要素 – HTML: ハイパーテキストマークアップ言語 | MDN
ulタグを使用してもスライダーが表示されなかったり崩れてしまうことはあまりないのですが、中間にdivタグが入っても構造上間違いのないマークアップにした方がいいと思います。
ドットや矢印の表示
スライダーとよくセットでついているドットや矢印。slick はドットはデフォルトでは表示されず、矢印はデフォルトで表示されるようになっています。
JavaScript$('.slider_class').slick({ arrows: false, dots: true, });$('.slider_class').slick({ arrows: false, dots: true, }); arrows矢印の表示・非表示dotsドット（インジケーター）の表示・非表示自動再生（オートプレイ）
自動でスライドさせたい場合は autoplay:true を追加します。
JavaScript$('.slider_class').slick({ autoplay: true, autoplaySpeed: 3000, speed: 100, });$('.slider_class').slick({ autoplay: true, autoplaySpeed: 3000, speed: 100, }); autoplay自動でスライドさせるかどうかautoplaySpeedスライドが切り替わる時間speedスライドが切り替わる際のスクロールスピード一度のスライドで複数の要素を表示させる
1つずつ表示させるのではなく、複数の要素を表示させる場合は、slidesToShow で表示させる数を設定します。また複数表示させる場合、一回のスライドで複数一気にスライドさせたい場合は、slidesToScroll を使用します。
JavaScript$('.slider_class').slick({ slidesToShow: 3, slidesToScroll: 2 });$('.slider_class').slick({ slidesToShow: 3, slidesToScroll: 2 }); slidesToShow表示するスライドの数slidesToScroll一度のスクロールでスライドされる数中央にコンテンツを表示して左右のスライドを見せる（センターモード）
センターモードを指定しないときは左づめでスライド要素が表示されますが、これを中央に表示させ、なおかつ左右にあるスライドを見せたい場合は centerMode を使用します。
JavaScript$('.slider_class').slick({ centerMode: true, centerPadding: '80px', });$('.slider_class').slick({ centerMode: true, centerPadding: '80px', }); centerMode中央に寄せるか寄せないかcenterPadding左右のpaddingを指定初期値 : 50pxcenterPadding は、centerPadding: '10%' のようにパーセント表記もできます。真ん中に表示される画像のサイズは○％にしたいという場合はパーセントで指定しましょう。
スライドの幅を固定する（variableWidth）
表示させるスライドの幅サイズが決まっている場合は variableWidth オプションが活用できます。
variableWidthスライド幅の自動計算を無効にするかどうか。true で無効にする、false で無効にしない。初期値は falseなので自動計算される。slickでは要素が読み込まれた際にコンテンツサイズを自動計算してスライドを作っています。このサイズを自動的に計算されないようにするには variableWidth: true, の記述が必要です。
例えば200pxの幅で各スライドを表示させたい場合は以下のようにコーディングします。
HTML<div class="slider_class09"> <div class="slide_item">スライド01</div> <div class="slide_item">スライド02</div> <div class="slide_item">スライド03</div> <div class="slide_item">スライド04</div> </div><div class="slider_class09"> <div class="slide_item">スライド01</div> <div class="slide_item">スライド02</div> <div class="slide_item">スライド03</div> <div class="slide_item">スライド04</div> </div> CSS.slider_class09 .slide_item { width: 200px; }.slider_class09 .slide_item { width: 200px; } JavaScript$('.slider_class09').slick({ variableWidth: true, });$('.slider_class09').slick({ variableWidth: true, });サムネイル付きのスライド
サムネイル付きのスライドは、スライドさせる本体と表示するサムネイルの要素を作り、それぞれをリンクさせます。
HTML<div class="slider_class"> <div class="slide_item">スライド01</div> <div class="slide_item">スライド02</div> <div class="slide_item">スライド03</div> </div> <div class="slider_class_thumb"> <div class="">スライド01</div> <div class="">スライド02</div> <div class="">スライド03</div> </div> <script> $('.slider_class').slick({ asNavFor:'.slider_class04_thumb', }); $('.slider_class_thumb').slick({ asNavFor:'.slider_class', focusOnSelect: true, centerMode: true, slidesToShow:3, slidesToScroll:1 }); </script><div class="slider_class"> <div class="slide_item">スライド01</div> <div class="slide_item">スライド02</div> <div class="slide_item">スライド03</div> </div> <div class="slider_class_thumb"> <div class="">スライド01</div> <div class="">スライド02</div> <div class="">スライド03</div> </div> <script> $('.slider_class').slick({ asNavFor:'.slider_class04_thumb', }); $('.slider_class_thumb').slick({ asNavFor:'.slider_class', focusOnSelect: true, centerMode: true, slidesToShow:3, slidesToScroll:1 }); </script> asNavFor複数のスライドをリンクさせる。値には連動させたいスライダーのクラスを指定。focusOnSelectクリックしたスライドをフォーカスさせるかどうか。true でさせる、false でさせない。初期値は false。 サムネイルはスライドしないようにするサムネイル付きのスライダーの時に、大きく表示する画像やコンテンツのみスライドさせてサムネイルはスライドさせないようにしたいこともあると思います。例えばサムネイルは数段に分けて全部表示させたい場合や、表示させる数に対して画像の枚数が少ないといったときはサムネイルはスライドさせないようにする記述が必要です。（ドットの代わりとしてサムネイルを使うようなイメージ）
CSSで該当するスライダーの .slick-track クラスで、transformプロパティの値を変更することでスライドさせないようにすることができます。
CSS.slider_class_thumb .slick-track { transform: translate3d(0,0,0)!important; } /* もしくは以下の記述でもOK */ .slider_class_thumb .slick-track { transform: unset!important; }.slider_class_thumb .slick-track { transform: translate3d(0,0,0)!important; } /* もしくは以下の記述でもOK */ .slider_class_thumb .slick-track { transform: unset!important; }slick ではこの translate3d の数字を動的に変更することでスライドされるようになっています。そのためこの数字が変わらないようにすることでスライドされないようにできます。 !important をつけないと適用されないので必須です。
1ページに複数のサムネイル付きスライダーを設置した時同じスライダーのクラスを使用してサムネイル付きのスライダーを複数設置すると、動かしたいスライダーとは別のサムネイルスライダーが同時に動いてしまうということがありました。その解決法は以下の記事にまとめています。
slickでサムネイル付きスライダーを複数設置したらサムネイルが同時に動いてしまう
画面幅によってスライドのオプションを変更する（レスポンシブ）
レスポンシブ対応させる場合は responsive で設定します。responsive の中に breakpoint: 数字 と settings:{} を追加し、ブレイクポイントとその範囲になった時に変更する内容を記述します。
breakpoint で指定した数字未満の画面サイズに、settings の内容が適用されます。以下のコードなら480px未満の場合はスライド表示数が1になります。
JavaScript$('.slider_class').slick({ slidesToShow: 3, centerMode: true, responsive: { breakpoint: 480, settings:{ slidesToShow: 1, } } });$('.slider_class').slick({ slidesToShow: 3, centerMode: true, responsive: { breakpoint: 480, settings:{ slidesToShow: 1, } } });上記はブレイクポイントが一つだけの場合です。2つ以上のブレイクポイントを作る場合は [] で囲むことと「}」の後に「,」カンマをつけるのをお忘れなく。1つの場合でもこの形で記述することもできます。
JavaScript$('.slider_class').slick({ slidesToShow: 3, centerMode: true, responsive:[ { breakpoint: 768, settings:{ slidesToShow: 2, centerMode: false, } }, { breakpoint: 480, settings:{ slidesToShow: 1, } } ] });$('.slider_class').slick({ slidesToShow: 3, centerMode: true, responsive:[ { breakpoint: 768, settings:{ slidesToShow: 2, centerMode: false, } }, { breakpoint: 480, settings:{ slidesToShow: 1, } } ] });初めは非表示のスライドをうまく動作させる
モーダルやタブ切り替え表示など、ページにアクセスした時に非表示になっているコンテンツの中にスライダーを実装しようとすると、スライダーがうまく表示されません。
例えば下記コードでは、「タブ1」のスライダーはアクセスしたときに表示されるので問題なく表示されますが、「タブ2」「タブ3」をクリックしすると表示した際にスライドが崩れます。
HTML <div class="tab_area"> <input type="radio" name="tab_name" checked id="tab1"> <label class="tab_class" for="tab1">タブ1</label> <div class="content_class"> <div class="slider_class01"> <div class="slide_item">スライド01</div> <div class="slide_item">スライド02</div> <div class="slide_item">スライド03</div> </div> </div> <input type="radio" name="tab_name" id="tab2"> <label class="tab_class" for="tab2">タブ2</label> <div class="content_class"> <div class="slider_class02"> <div class="slide_item">スライド01</div> <div class="slide_item">スライド02</div> <div class="slide_item">スライド03</div> </div> </div> <input type="radio" name="tab_name" id="tab3"> <label class="tab_class" for="tab3">タブ3</label> <div class="content_class"> <div class="slider_class02"> <div class="slide_item">スライド01</div> <div class="slide_item">スライド02</div> <div class="slide_item">スライド03</div> </div> </div> </div> <script> $('.slider_class01').slick(); $(".slider_class02").slick({ arrows: false, dots: true, }); </script> <div class="tab_area"> <input type="radio" name="tab_name" checked id="tab1"> <label class="tab_class" for="tab1">タブ1</label> <div class="content_class"> <div class="slider_class01"> <div class="slide_item">スライド01</div> <div class="slide_item">スライド02</div> <div class="slide_item">スライド03</div> </div> </div> <input type="radio" name="tab_name" id="tab2"> <label class="tab_class" for="tab2">タブ2</label> <div class="content_class"> <div class="slider_class02"> <div class="slide_item">スライド01</div> <div class="slide_item">スライド02</div> <div class="slide_item">スライド03</div> </div> </div> <input type="radio" name="tab_name" id="tab3"> <label class="tab_class" for="tab3">タブ3</label> <div class="content_class"> <div class="slider_class02"> <div class="slide_item">スライド01</div> <div class="slide_item">スライド02</div> <div class="slide_item">スライド03</div> </div> </div> </div> <script> $('.slider_class01').slick(); $(".slider_class02").slick({ arrows: false, dots: true, }); </script>【CSS】
CSSbody { max-width: 600px; margin: 0 auto; padding-bottom: 100px; } .slide_item { border: 1px solid; height: 200px; } .slick-prev:before, .slick-next:before { color: black; } .tab_area { width: 500px; margin: auto; flex-wrap: wrap; display: flex; } .tab_class { width: calc(100%/5); height: 50px; background-color: darkgrey; line-height: 50px; font-size: 15px; text-align: center; display: block; float: left; order: -1; } input[name="tab_name"] { display: none; } input:checked + .tab_class { background-color: #bdd5dd; } .content_class { display: none; width: 100%; } input:checked + .tab_class + .content_class { display: block; }body { max-width: 600px; margin: 0 auto; padding-bottom: 100px; } .slide_item { border: 1px solid; height: 200px; } .slick-prev:before, .slick-next:before { color: black; } .tab_area { width: 500px; margin: auto; flex-wrap: wrap; display: flex; } .tab_class { width: calc(100%/5); height: 50px; background-color: darkgrey; line-height: 50px; font-size: 15px; text-align: center; display: block; float: left; order: -1; } input[name="tab_name"] { display: none; } input:checked + .tab_class { background-color: #bdd5dd; } .content_class { display: none; width: 100%; } input:checked + .tab_class + .content_class { display: block; }非表示になっているスライダーを表示されたタイミングでうまく表示させるには、スライダーのサイズや位置をリセットするためのメソッドを追加します。スライダーが表示されるタイミングで .slick('setPosition'); を追加することでうまく表示されるようになります。
今回は inputタグを利用してタブを切り替えているので、この要素が変わった時にスライダーをセットするように記述しています。
JavaScript $('.slider_class01').slick(); $(".slider_class02").slick({ arrows: false, dots: true, }); $('input[name="tab_name"]').change(function() { $(".slider_class02").slick('setPosition'); }); $('.slider_class01').slick(); $(".slider_class02").slick({ arrows: false, dots: true, }); $('input[name="tab_name"]').change(function() { $(".slider_class02").slick('setPosition'); });ページにアクセス → 何秒後かにモーダルを表示させる、とった場合にうまくいかない時はこちらの記事が参考になりました。
slick.jsをモーダルなど、最初非表示のもので使うとき
カテゴリー : JavaScript