「スライダーを実装したい！」「でも何を使えばいいの？」という方に朗報です。
この記事ではスライダーを作成するプラグイン「slick」の設定方法から使い方、カスタマイズまでをしっかりばっちり説明していきます。
slickを使えばデザイナーやディレクターの要望にばっちり応えられること間違いなし！（かもしれません。）
目次
slick（スリック）とは
slickはjQueryベースの、スライダーを作成するためのプラグインです。レスポンシブにも対応し、IE8以上のブラウザであれば完全対応で、カスタマイズの幅も広いため、世界的に利用されています。
また、商用の利用もOK（※ちょっぴり条件があります）なので我々のような制作会社で導入するのにも安心です。
※slickはMITライセンスというライセンスの中でトップクラスに緩い制限のライセンスを採用しています。MITライセンスはざっくりいうと「このソフトウェアは誰でもタダで使っていいよー。改造もしていいし商用利用もいいよ！でも著作権表示か本許諾表示はちゃんと書いてね。」という感じになります。詳しくは英語ですがこちらをご確認ください。
slickで何ができるの？他と何が違うの？
slickを使えば、文字や画像が切り替わるスライダーを簡単に作成することができます。特にカルーセル（真横にスライドするスライダー。シンプルなやつですね。）に関するオプションが豊富でカスタマイズしやすいです。
また、レスポンシブ対応もしやすくて、スマホで見たとき・タブレットで見たとき、PCで見たとき…という風にブレイクポイントを設定すればデバイスに応じた見せ方が可能です。
もちろんシンプルな使い方もできるので初心者～上級者まで幅広く使えるプラグインだといえるでしょう。
slickの使い方～導入編～
便利なスライダープラグイン・slick。まずはあなたの開発環境に導入してみましょう。
slickの導入方法
slickを使うためには大きく分けて「オンライン上のslickを使う」か「ローカルにslickをダウンロードする」という二通りの方法があります。ひとつずつ説明していきましょう。
どちらの場合でも必要なのが「slick.min.js」と「slick.css」です。
JSファイルはminがついているものとそうでないものがありますが、minの方が軽量化されており、私たちがそのソースを触ることはないので導入するならminの方がおすすめです。
なお、slickはjQueryベースのプラグインなのでjQueryそのものを用意するのもお忘れなきよう！
オンラインのslickを使う方法
HTMLに以下のソースをコピペするだけ（2020年1月時点）。とっても簡単ですね！
1 2 3 4 5 6 7 | [index.html] //CSS <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/> //JS <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script> |
この方法だとオンライン環境でないと使えない（＝ローカルで検証できない）、cdnのサーバーにエラーがあったりサービスが廃止になったときに使えなくなるというデメリットもあります。
ローカルにslickをダウンロードする方法
ローカルにダウンロードする場合は、公式サイトより「get it now」をクリックして「Download Now」をクリックするとZipファイルがダウンロードされます。
こちらを解凍したら、任意の場所にCSSファイルとJSファイルを置いて、HTMLにパスを書いたら完了です。今回は以下のような配置にしてみましょう。
赤枠の「slick.css」「slick.js」が今回DLしたものです。
スライダーをカスタマイズする際はslick.cssは触らずにcommon.cssで上書きしていきます。JSも同様にcommon.cssで動きを設定します。
読み込みの順番にも注意してください。下に書いてある方で上書きされるのでcommon~を下に書きましょう。
1 2 3 4 5 6 7 8 9 | [index.html] //CSS <link rel="stylesheet" type="text/css" href="css/slick.css"/> <link rel="stylesheet" type="text/css" href="css/commmon.css"/> //JS <script type="text/javascript" src="js/slick.min.js"></script> <script type="text/javascript" src="js/common.js"></script> |
困ったときは？
もし上記の方法でうまくいかない（slickが動かない）場合は以下を確認しましょう。
書き方はあっているか
セレクタの指定が間違っていないか、タイプミスがないかなど、深呼吸して一度落ち着いてからソースをみましょう。
余談ですがトイレに行くとか珈琲を入れるために席を離れると、いい具合にスイッチが切り替わるのでおすすめです。
読み込み位置は適切か
css/jsともに、基本的にheadタグ内に書いて大丈夫なのですが、
他のプラグインを入れていたりするとうまくいかない場合があるので、jsの記述だけbodyの閉じタグ(/body)の直前に書いてみてください。
1 2 3 4 5 6 7 8 | [index.html] (他のソース) <script type="text/javascript" src="js/slick.min.js"></script> <script type="text/javascript" src="js/common.js"></script> ↑bodyの閉じタグ直前に書く </body> |
それでもうまくいかない場合
slickのバージョンを変えてみるとうまくいくかもしれません。
最新版より前のバージョンが必要な場合はGitHubからの入手になります。
こちらのページに今までのリリース履歴があるので、こちらの「Sourse Code(zip)」を入手します。
あとは上述したローカルにダウンロードする方法と同じです。
それでも・・・それでもうまくいかなかった場合はぜひ弊社にご連絡ください！
slickの使い方～実践編～
導入ができたところで、実際にslickでスライダーを作ってみましょう。HTMLファイルに以下のように書いていきます。
画像はLorem Picsum様よりお借りしました。スタイリッシュなダミー画像がダウンロードできるのでおすすめです。
1 2 3 4 5 6 7 8 | [index.html] <ul class="slick01"> <li><img alt="画像1" src="img/photo1.jpg" /></li> <li><img alt="画像2" src="img/photo2.jpg" /></li> <li><img alt="画像3" src="img/photo3.jpg" /></li> </ul> |
構造はリストでもdivでもなんでもいいのですが、ポイントは画像を囲むブロックにクラス（idでも大丈夫です）をつけることです。JSでそのクラスをもとにメソッドを呼び出す、という感じになります。
1 2 3 4 | [common.js] $('.slick01').slick(); |
この状態で確認すると、
「Previous」「Next」をクリックすると2枚目3枚目の画像に変わります。ですが、この状態だとアレですよね…すごくダサいですよね。
なので次からはカスタマイズする方法をご紹介していきます！
※ちなみに「カスタマイズめんどくさい、いじらないでいい感じに見せたい」という場合は「slick-theme.css」を読み込んでおくと見た目がいい感じに調整されますが、多くの場合カスタマイズしていくと思いますので割愛します。
slickの使い方～カスタマイズ編～
初期状態だとあまりカッコよくないので、ここからは「見た目のカスタマイズ」と「動きのカスタマイズ」のやり方をご紹介します。
slickのオプションについて
slickの動きや、スライダー操作に関する見た目を管理するのがオプションです。かなりの種類があるので使用頻度が高そうなものをご紹介しておきます。
| オプション名 | 値(赤字は初期値) | 概要 |
|---|---|---|
| autoplay | true/false | 自動再生 |
| dots | true/false | ドット状のナビを表示 |
| arrows | true/false | 前/次にスライドを切り替える矢印 |
| slidesToShow | 1 | 表示するスライド数 |
| slidesToScroll | 1 | 1回で動くスライド数 |
より詳しいオプションを知りたい場合は公式のサイト（英語）か「slick オプション」などで調べてみるといいでしょう。
オプションの使い方は以下の通りです。ポイントは「slick()の中に{}を入れてその中に処理を書く」「オプション名: 値」の形式で書く」「オプションを複数設定する場合は”,”でつなぐ」の3点です。
1 2 3 4 5 6 7 | [common.js] $('.slick01').slick({ //{}を入れる autoplay: true, //「オプション名: 値」の形式で書く dots: true, //複数書く場合は「,」でつなぐ }); |
これだけでは見た目が非常に残念な感じになるので、CSSも修正していきます。
それぞれのパーツはデフォルトだと以下のように出力されるので、これを見つつカスタマイズしてみましょう！（バージョンによって多少の違いはあるので、うまくいかない場合は検証ツールなどでご確認ください。）
①スライダー本体
1 2 3 4 | [HTML] <ul class="slick01 slick-slider">..スライダーの中身..</ul> |
②スライド内画像
1 2 3 4 | [HTML] <li class="slick-slide slick-current slick-active" data-slick-index="1" aria-hidden="false" tabindex="0" role="tabpanel" id="slick-slide01" aria-describedby="slick-slide-control01" style="width: 920px;"><img alt="画像2" src="img/photo2.jpg"></li> |
③矢印
1 2 3 4 5 6 7 | [HTML] //前 <button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="">Previous</button> //次 <button class="slick-next slick-arrow" aria-label="Next" type="button" style="">Next</button> |
④ドットナビ
1 2 3 4 5 6 7 8 9 | [HTML] <ul class="slick-dots" style="" role="tablist"> <li class="" role="presentation"> <button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 3" tabindex="-1">1</button> </li> ...以下続く </ul> |
一部ごちゃごちゃしているところがありますが、矢印をカスタマイズしたいときは”.slick-arrow”、ナビを触る場合は”.slick-dots li”あたりで対応できるということです。
ちなみにナビのカレント部分を修正したい場合は”.slick-active”を修正してください。
このあたりを踏まえて修正してみると・・・
なんということでしょう。スタイリッシュな感じになりましたね！
slickの使い方～レベルアップ編～
slickの基本的なカスタマイズ方法をご紹介しましたが、これからはより表現の幅を広げた応用編となります。サンプルのコードを用意しているので参考にして作ってみてください。
前後の画像がちょい見えするスライダー（centerMode）
このような前後の画像が見えるようなスライドはオプション「centerMode」を使用します。前後の画像がどのくらい見せるかを設定する「centerPadding」と一緒に使うのが一般的。
1 2 3 4 5 6 7 | [common.js] $('.slick01').slick({ centerMode: true, centerPadding: '25%', }); |
centerPaddingはpxなど固定値でも大丈夫ですし、％やvwなど相対的に設定することも可能です。
ちなみに[centerPaddingの値 x 2]した幅がスライダー内の画像の幅以上になると何も見えなくなるのでご注意ください。
サイズがバラバラな画像を入れたスライダー（variableWidth）
ここまではスライダー内で使用した画像のサイズを統一させていました。ところがサイズが違う画像を入れたい！ということだってあるかもしれません。
そんなときに便利なのが「variableWidth」です。違う幅の画像を扱う場合は検討するとよいオプションです。
上記のちょい見えするスライダーに幅が違う画像を足した状態で比較してみましょう。これがvariableWidth設定なしの状態です。
画像と画像の間の余白がぐちゃぐちゃですね。次にvariableWidthを設定してみると・・・
幅がバラバラでもうまく真ん中に収めてくれていますね！
なお、この状態だと画像が上辺揃えになっていて気持ち悪い！高さもうまく揃えたい！という場合はさらにカスタマイズが必要になります。
大きさがバラバラな画像で高さも揃えたい場合
「画像の高さをvwで指定して、最大高さと最小高さを設定する」
1 2 3 4 5 6 7 8 | [common.css] .slick-slide img { height: 30vw; //ポイント1 max-height: 400px; //ポイント2 min-height: 350px; //ポイント2 } |
これでほとんどのブラウザ（Chrome/ IE / Edge/ Firefox / Safari それぞれ最新版で検証しました）でも見え方は変わらず、きれいに表示されるようになります！ちなみにブラウザの幅を変えても崩れません！
ポイント1：高さをvwで指定する
pxでも%でもなく、vwで設定してください。（emでもCSSによったらできるかもしれません)。
pxだと画面幅を変えたときに崩れてしまう、%だと親要素の幅の影響を受けてしまうのでうまくいかない…となり、vwを設定すると画面幅の変更にも柔軟に対応できるようになります。例ではvwを30に設定していますがこれは1でも100でも大丈夫です。
「高さがvwで指定されてある」ということが重要になります。
ポイント2：最大高さと最小高さを設定する
高さをvwで設定すると、画面幅によって高さが変化します。幅が広くなればなるほど画像の高さも高く、狭くなればなるほど小さくなります。
そうなると見た目が非常に残念なことになるので、最大高さと最小高さを設定して、最低限の見た目を担保しようというわけです。
レスポンシブ対応のスライダーにする（responsive）
いよいよslickの強みであるレスポンシブ対応について解説していきます。
オプションは「responsive」を使います。そのまんまですね。コードは以下のような感じで書きます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | [common.js] $('.slick01').slick({ responsive: [ { breakpoint: 768, settings: { arrows: false, } }, { breakpoint: 640, settings: { arrows: false, dots: false, } }, ] }); |
ちょっとややこしいですね・・・。他のオプションと同様に「responsive: 値」という形式なのですが値の部分が配列になります。
その中にブレイクポイントとその時の設定を書いていきます。
なお、デフォルトではブレイクポイントの判定は「画面幅」ですが、オプション「respondTo: ‘slider’」と設定するとスライダーの幅で切り替えをすることもできます。
slickの使い方～もっとレベルアップ編～
ここまでカスタマイズできればかなりslickを使いこなせたといっても過言ではないかもしれませんが、まだまだslickはカスタマイズができるんです！
ここでは「イベント」について解説して、実際の使用例をご紹介したいと思います。
slickのイベントについて
簡単にいうと「○○したときにXXする」という処理を指定できるのがslickのイベントであり、この○○のバリエーションをslickが用意してくれているというわけです。
代表的なものをご紹介します。
| イベント名 | 概要 |
|---|---|
| beforeChange(afterChange) | スライドが切り替わる前（後）に発生 |
| breakpoint | 設定したブレイクポイントに到達したら発生 |
| init | 最初の初期化後に発生 |
| setPosition | 位置・サイズの変更後に発生 |
| swipe | スワイプ・ドラッグ後に発生 |
使い方はこうです。各スライドや画像ではなく、スライダー本体（サンプルだと.slider01ですね）を指定するのがミソのようです。
下記の例では画像が中央にくるときに大きくなる、という動きをつけています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | [common.js] $('.slick01').on('beforeChange', function(){ $('.slick-current').removeClass('is--active'); }); $('.slick01').on('afterChange', function(){ $('.slick-current').addClass('is--active'); }); [common.css] .slick-slide { -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; transform: scale( .75 ); } .is--active { transform: scale( 1 ); } |
切り替わる前のスライドのサイズを小さくしておき、切り替わると100％の大きさになるように調整しました。
beforeChangeとafterChangeでそれぞれクラスの切り替えをしておかないと、画像が大きくなったままになるので注意が必要です。
slickの使い方～まとめ～
slickの使い方を導入からカスタマイズまで説明してきました。
オプションとイベントが使えればかなりカスタマイズの幅が広がります！
（弊社でもスライダーを使ったサイトを制作しているので、よかったらこちらもご覧ください・・・！）
へえ、どんなの作ってるの？
最後までお読みいただきありがとうございました！
