slickの導入方法〜使い方

くりゅう

slickとは？

jQueryベースの、スライダーを作成するためのプラグインです。レシポンシブに完全対応で、カスタマイズの幅も広いため世界的に利用されている。

slickを使えば、文字や画像が切り替わるスライダーを簡単に作成することができます。特にカルーセル（真横にスライドするスライダー）に関するオプションが豊富でカスタマイズしやすい。

レシポンシブ対応もしやすくて、スマホで見たとき・タブレットで見たときに、PCで見たとき･･･という風にブレイクポイントを設定すればデバイスに応じた見せ方が可能でである。

slickの導入方法

slickの使うためには大きく分けて２つの使い方がある

①オンライン上のslickを使う
②ローカルにslickをダウンロードする

どちらの場合でも必要なのが、「slick.min.js」「slick.css」

JSファイルはminがついているものとそうでないものがある。minの方が軽量化されており、私たちがそのソースを触ることはないので導入するならminの方がおすすめ。
※slickはjQueryベースのプラグインなのでjQueryそのものも用意する

オンラインのslickを使う方法

HTMLに以下のソースをコピペするだけ

＜index.html＞

//CSS
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
//JS
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

この方法だとオンライン環境でないと使えない（＝ローカル検証できない）、cdnサーバーにエラーがあったりサービス廃止になったときに使えなくなるデメリットもある。

ローカルにダウンロードする方法

ローカルにダウンロードする場合は、公式サイトより「get it」をクリックして「Download Now」をクリックするとZipファイルがダウンロードされる。

http://kenwheeler.github.io/slick/

こちらを解凍したら、任意の場所にCSSファイルとJSファイルをおいて、HTMLにパスを書いたら完了。

例）
📁ー 　index.html
　ー　　📁css 　　ー common.css
　　　　　　　　　ー  slick.css  
    ー　　📁JS　  　ー common.js
　　　　　　　　　ー  slick.min.js

スライダーをカスタマイズするときはslick.cssは触らず、common.cssで上書き。JSも同様にcommon.cssで動きを設定

＜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のオプション

slickの動きや、スライダー操作に関する見た目を管理するのがオプション

オプション名：値（赤字は初期値）：概要
autoplay：true / false：自動再生
dots：true / false：ドット状のナビを表示
arrows：true / false：前 / 次にスライドを切り替える矢印
slidesToShow：１：表示するスライド数
sildesToScroll：１：1回で動くスライド数

オプションの使い方
ポイント
①slick()の中に{}を入れてその中に処理を書く
②「オプション：値」の形式で書く」
③「オプションを複数設定する場合は","でつなぐ」

[common.js]

 $('.slick01').slick({ //{}を入れる
   autoplay: true, //「オプション名: 値」の形式で書く
   dots: true, //複数書く場合は「,」でつなぐ
 });

レシポンシブ対応のスライダーにする

オプションはresiponsiveを使う

[common.js]
 $('.slick01').slick({
   responsive: [
     {
       breakpoint: 768,
       settings: {
         arrows: false,
       }
     },
     {
       breakpoint: 640,
       settings: {
         arrows: false,
         dots: false,
       }
     },
   ]
 });

他のオプションと同様に「resiponsive: 値」という形式だが、値の部分が配列になる

デフォルトではブレイクポイントの判定は「画面幅」ですが、オプション「respondTo: 'slider'」と設定するとスライダーの幅で切り替えをすることもできる

slickのイベントについて

「〇〇したときにXXする」という処理をしてできるのがイベントであり、このバリエーションをslickが用意してくれる

イベント名：概要
beforeChange(afterChange)：スライドが切り替わる前（後）に発生
breakpoint：設定したブレイクポイントに到達したら発生
init：最初の初期化後に発生
setPosition：位置・サイズの変更後に発生
swipe：スワイプ・ドラック後に発生

使い方
各スライドや画像ではなく、スライダー本体を指定する
$(スライダー本体のセレクタ).(‘イベント名’, function(){ 処理 });





いいなと思ったら応援しよう！