『slick』の基本的な使い方（オプションなど）を細かくまとめていく

JavaScript2021.04.03

以前紹介した“『slick』を使った無限ループスライダーの作り方と注意点“の記事が結構人気みたいなので、改めてjQueryのプラグイン『slick』の使い方をまとめていくことにします。

実際に動く、よく使うオプションのサンプルを配置していくのでページ自体が重めになりますがよろしくどうぞ。

jQuery不要で使えるswiperにも手を出しているのでこちらもどうぞ

swiper.js（8.1.4）の使い方を紹介してみる

ありがたいことに当サイトでは『slick』に関する記事が人気で、スライダー系の人気はまだまだ健在なのかと感じる今日このごろちょっと前の案件・・・。

使い方だけをまとめたものを動画化してみました

動きがあるオプションを実際に使っているものも動画化しています

slickとは

ここで紹介するslickは、レスポンシブ対応しているスライダー用のjQueryプラグインです。

複数のブレイクポイント、CSS3のトランジション、タッチイベント＆スワイプなどにも対応しているので、カスタマイズ次第でかなり多くの表現ができるようになります。

使う前の準備

slickはjQueryプラグインなので、DLして必要なファイルを用意して読み込むか、CDNを使って読み込む必要があります。どちらもslickのサイトから入手できるので入手していきます。

slick

slick - the last carousel you'll ever need

slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

https://kenwheeler.github.io/slick/

ファイルをダウンロードする場合

slickのサイトに移動してメニュー右端にある「get it now」をクリック

移動先にある「Download Now」をクリックするとzipファイルのDLが始まります。

DLしたzipファイルは解凍して必要なファイルをslick用のフォルダを作って中に移動させましょう

必要なファイルは以下のとおりです

slick.min.js
slick.css
slick-theme.css
ajax-loader.gif ※ローディング用
font ※矢印用

あとはhead要素の内部でjsファイルと２つのcssファイルを読み込みましょう。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="slick/slick-theme.css">
  <link rel="stylesheet" href="slick/slick.css">
  <script src="js/jquery2.2.4.min.js"></script>
  <script src="slick/slick.min.js"></script>
</head>

<head>

</head>

CDNを利用する場合

DLする場合と同じくslickのサイトに移動してメニュー右端にある「get it now」をクリック

移動先にあるDLやgithubボタンの下にある「You can also use slick with the jsDelivr CDN!」下部のコードがCDN用のコードになります。
このコードをhead要素の内部にコピペしましょう

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
  <script src="js/jquery2.2.4.min.js"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</head>

<head>

</head>

これで使うためのファイル類の準備は完了です

slickをとりあえず動かしてみる

各種ファイルの読み込みが完了したら、実際に動かしてみます。

ここでは下記のようなコードを用意しましたので、こちらを使って解説していきます

スライダー全体をクラス「slider」がついたdiv要素で囲み、動かすコンテンツはdiv要素（一部img要素）になっています

<div class="slider">
  <div class="slider_item">①</div>
  <div class="slider_item">②</div>
  <div class="slider_item">③</div>
</div>

</div>

まずはslickを動かすコードを書いていきます。
slickを動かすにはスライダー全体を囲んでいる要素をjQueryオブジェクトにし、実行していきます。

head要素の最後にscript要素を作り、下のようなコードを入れるととりあえずslickが動き、スライダーが表示されるはずです。

<script>
$(function(){
  $('.slider').slick();
});
</script>

$(function(){

$('.slider').slick();

});

</script>

ここまでではまだオプションの設定がありませんので手動のスライダーにはなりますが完成になります

ファイルをDLして使った場合は前後へスライドする矢印型のアイコンフォントが表示され、CDNを使った場合は「Previous」「Next」のボタンが表示されます。

ボタンクリックやタッチで動きますし、スライドをマウスカーソルでのドラッグやスワイプして切り替えられることが確認でき、かなりお手軽なのがわかるはずです。

slick起動直後

①

②

③

DLしたファイルを使った場合、アイコンフォントはデフォルトでは白なので見えにくい形になっています。
※ ここでは矢印の色を黒にして見えやすくしています

表示位置はスライダーの外側に配置されているので、ウィンドウサイズからはみ出して、スクロールバーが出てくる原因になったりしますのでご注意ください。

slickのオプション

slickは豊富なオプションが用意されているので、先程のコードにオプションを追加してカスタマイズしていきます

オプションはslickのあとにある()の中に{}を入れこの中に『オプション名:値』の形で記述していきます。
次の行にもオプションを書く場合には値のあとに『,』を打ちましょう

<script>
$(function(){
  $('.slider').slick({
    オプション名:値,
    オプション名:値
  });
});
</script>

$(function(){

$('.slider').slick({

オプション名:値,

オプション名:値

});

</script>

動きを操作するオプション

まずは動き方や時間を設定できるオプションです。
よく使われるものが多いと思います。

オプション名	デフォルト値	使える値や仕様
speed	300	スライドの切り替えにかける時間の設定 ※ デフォルトの300は切り替えに0.3秒間かける
autoplay	false	自動再生させるかを設定するオプション値に『true』を入れると自動再生する
autoplaySpeed	3000	自動再生時のスライドの表示時間の設定 ※ デフォルトの3000は3秒間表示したあと切り替え
infinite	true	スライドをループさせるかの設定値に『false』を入れるとループしなくなる自動再生したときの動き true：①→②→③→①→②→③→①ループする false：①→②→③→②→①→②→③とループしないで戻る
vertical	false	縦方向（下から上）にスライドさせたい場合は『true』にする ※ fadeのオプションが『true』だとバグるので共存不可能
fade	false	『true』にするとスライドの切り替えをフェードイン・フェードアウトに切り替える ※ verticalのオプションが『true』だとバグるので共存不可能
easing	‘linear’	jQueryのイージングを文字列形式で設定できる ※ jquery-uiで用意されているものも読み込んであれば利用可能
cssEase	‘ease’	画像切り替え時のイージングを CSS3のAnimationEasingで設定できるオプションキーワード型の’ease”ease-in”ease-out”ease-in-out”linear”step-start”step-end’や関数での指定’steps(4, jump-end)”cubic-bezier(0.1, 0.7, 1.0, 0.1)’ ができる
useCSS	true	CSSのtransitionを有効にするかの設定
useTransform	true	CSSのtransformを有効にするかの設定
rows	1	スライダーの行数を設定するオプション. 2以上に設定すると、グリッドモードが初期化されます。slidesPerRowを使用して、各行に含めるスライドの数を設定します。
slidesPerRow	1	rowsの値が2以上のとき、1行に表示するスライド数を設定できるオプション。
variableWidth	false	スライド幅の自動計算を無効にするための設定。 ※ trueにすると自動計算が無効になる
rtl	false	スライドの向きを変えるための設定 ※ このオプションを使う場合はスライダーのコンテナに『dir=’rtl’属性』を付与しないとうまく動かない。

自動再生

例えば自動再生をさせたいと思ったら『autoplay:true』をオプションに入れてみます

SAMPLE 自動再生

①

②

③

<script>
$(function(){
  $('.slider').slick({
    autoplay:true
  });
});
</script>

$(function(){

$('.slider').slick({

autoplay:true

});

</script>

縦方向 + スピード調整

下から上にむかって縦方向にアニメーションさせたい場合は『vertical:true』をオプションに入れます

切り替えにかけるスピード『speed:1000』を1秒に設定もしてみます

SAMPLE 縦方向 + スピード調整

①

②

③

<script>
$(function(){
  $('.slider').slick({
    autoplay:true,
    vertical:true,
    speed:1000
  });
});
</script>

$(function(){

$('.slider').slick({

autoplay:true,

vertical:true,

speed:1000

});

</script>

『vertical:true』をオプションを使うとスライドの周りに1pxの透明のボーダーが付くので切替時に隙間が空いているように見えます。
対応したい場合はcssで上書きする形を取るといいでしょう

.slick-vertical .slick-slide{
  border: none;
}

.slick-vertical .slick-slide{

border: none;

}

フェード + 表示時間調整

切り替えにかけるスピードは1秒のまま、スライドをフェードイン・フェードアウトさせたい場合は『fade:true』をオプションに入れます
※ verticalのオプションが『true』だとバグるので注意！

スライドの表示時間を『autoplaySpeed:5000』で5秒に設定もしてみます

SAMPLE フェード + 表示時間調整

①

②

③

<script>
$(function(){
  $('.slider').slick({
    autoplay:true,
    speed:1000,
    autoplaySpeed:5000,
    fade:true
  });
});
</script>

$(function(){

$('.slider').slick({

autoplay:true,

speed:1000,

autoplaySpeed:5000,

fade:true

});

</script>

ループ（infinite）解除

デフォルトではスライドはループして表示されますが『infinite:false』を設定することで、この設定を外すこともできます。

<script>
$(function(){
  $('.slider').slick({
    infinite:false
  });
});
</script>

$(function(){

$('.slider').slick({

infinite:false

});

</script>

SAMPLE ループ解除

①

②

③

『infinite:false』は、最初のスライドが表示されているときの前に戻る矢印アイコンと、最後のスライドが表示されているときの次へ進む矢印アイコンには、特別なクラスが付与されています。
※ デフォルトは『opacity: .25』がついています

.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
    opacity: .25;
}

.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {

opacity: .25;

}

見た目を変えたい場合はこちらのcssを上書きして操作するといいでしょう。

例としてここでは消してみます

矢印アイコンをカスタム

①

②

③

.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
    display: none;
}

.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {

display: none;

}

ループ解除 + 自動再生

『infinite:false』は自動再生と組み合わせると言ったり来たりするスライドになります

<script>
$(function(){
  $('.slider').slick({
    autoplay:true,
    infinite:false
  });
});
</script>

$(function(){

$('.slider').slick({

autoplay:true,

infinite:false

});

</script>

SAMPLE ループ解除 + 自動再生

①

②

③

表示に関するオプション

見た目などを変えるためのオプションです。
この辺もよく操作すると思います。

オプション名	デフォルト値	使える値や仕様
arrows	true	左右にでる矢印の表示設定 ※ 非表示にする場合はfalseを設定する
prevArrow	<button type=”button” class=”slick-prev”>Previous</button>	前への矢印のHTMLを変更する ※ 変更用のHTMLタグを文字列として入れる
nextArrow	<button type=”button” class=”slick-next”>Next</button>	後への矢印のHTMLを変更する ※ 変更用のHTMLタグを文字列として入れる
appendArrows	スライダー内部	矢印アイコンの生成場所を変更する値はHTMLにドットインジケーター用の要素を作りjQueryオブジェクトの形で設定する
dots	false	ドットインジケーターを表示する ※ 表示する場合はtrueを設定する
dotsClass	‘slick-dots’	ドットナビのクラス名の変更するオプション付けたいクラス名を文字列で指定する’my-dots’
appendDots	スライダー内部	ドットインジケーターの生成場所を変更する値はHTMLにドットインジケーター用の要素を作りjQueryオブジェクトの形で設定する
customPaging	なし	dots:trueのとき、ドットをサムネイルなどにカスタマイズするfunctionをつかってカスタマイズ可能
slidesToShow	1	スライドの表示数の設定 ※ 表示したい数を数値で指定する
slidesToScroll	1	1度にスライドする数の設定 ※ スライドさせたい数を数値で指定する
adaptiveHeight	false	trueの場合、高さ可変 faleseの場合、高さ固定
centerMode	false	センターモード（＝両端見切れ状態）になる
centerPadding	’50px’	センターモード時、見切れたコンテンツの幅をpx指定できる
asNavFor	null	スライダーを他のスライダーのナビゲーションとして連携しサムネイル付きのスライダーを実装できる
lazyLoad	ondemand	画像読み込みのタイミングを設定する。・ondemand：画像をスライドさせると画像を読み込む。・progressive：ページが読み込まれた後に非表示の画像を読み込む。
zIndex	1000	z-indexの値を設定できるオプション

矢印の表示非表示

『arrows:false』を設定すると矢印が消えてくれます

<script>
$(function(){
  $('.slider').slick({
    autoplay:true,
    arrows:false
  });
});
</script>

$(function(){

$('.slider').slick({

autoplay:true,

arrows:false

});

</script>

SAMPLE 矢印の表示非表示

①

②

③

もともとスライドの外にある矢印の位置調整はcssで行えますので移動させたい場合はこちらを操作しましょう。
※ z-indexを指定しないと前へ戻るボタンがスライダーに潜りこむので注意

/*デフォルト*/
.slick-prev {
  left: -25px;
}
.slick-next {
  right: -25px;
}

/*調整後*/
.slick-prev {
  left: 0;
  z-index: 1;
}
.slick-next {
  right: 0;
}

/*デフォルト*/

.slick-prev {

left: -25px;

}

.slick-next {

right: -25px;

}

/*調整後*/

.slick-prev {

left: 0;

z-index: 1;

}

.slick-next {

right: 0;

}

矢印の位置調整

①

②

③

表示する矢印を変更

『prevArrow』を設定すると前への矢印のHTMLを変更することができ、『nextArrow』を設定すると後への矢印のHTMLを変更することができます。 ※ 変更用のHTMLタグを文字列として入れます。

ここでは画像を置いたときの例として紹介します

SAMPLE 表示する矢印を変更

①

②

③

東急ハンズみたいになってしまいました

<script>
$(function(){
  $('.slider').slick({
    autoplay:true,
    prevArrow:'<img src="yubi-left.svg" alt="" class="prev_icon">',
    nextArrow:'<img src="yubi-right.svg" alt="" class="next_icon">'
  });
});
</script>

$(function(){

$('.slider').slick({

autoplay:true,

prevArrow:'<img src="yubi-left.svg" alt="" class="prev_icon">',

nextArrow:'<img src="yubi-right.svg" alt="" class="next_icon">'

});

</script>

これで指定した画像は表示されますが、位置などの調整が必要なのでcssで調整しましょう

.prev_icon{
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translate(0,-50%);
  width: 30px;
  z-index: 1;
}
.next_icon{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translate(0,-50%);
  width: 30px;
  z-index: 1;
}

.prev_icon{

position: absolute;

top: 50%;

left: 10px;

transform: translate(0,-50%);

width: 30px;

z-index: 1;

}

.next_icon{

position: absolute;

top: 50%;

right: 10px;

transform: translate(0,-50%);

width: 30px;

z-index: 1;

}

下のリンクの記事で詳しく紹介しています

slickの矢印ナビをカスタマイズ方法を紹介しようと思う

slickは便利だけれども、進む・戻るの矢印ナビは初めて使う人にはわかりにくいハマリポイントだと思います。そのまま使うとスライダー外部に出・・・。

ドットインジケーターの表示切り替え

『dots:true』を設定するとドットインジケーターを表示します

SAMPLE ドットインジケーターの表示切り替え

①

②

③

<script>
$(function(){
  $('.slider').slick({
    autoplay:true,
    dots:true
  });
});
</script>

$(function(){

$('.slider').slick({

autoplay:true,

dots:true

});

</script>

表示するスライド数の調整

『slidesToShow』を設定すると表示するスライド数の調整ができます。デフォルトは1になっています

SAMPLE 表示するスライド数の調整

①

②

③

<script>
$(function(){
  $('.slider').slick({
    autoplay:true,
    slidesToShow:2
  });
});
</script>

$(function(){

$('.slider').slick({

autoplay:true,

slidesToShow:2

});

</script>

1度にスライドする数の調整

『slidesToScroll』を設定すると1度にスライドする数の調整ができます。デフォルトは1になっています

『slidesToShow』と組み合わせると面白い動きを表現できます
※ スライドを増やしています

SAMPLE 1度にスライドする数の調整

①

②

③

④

⑤

⑥

<script>
$(function(){
  $('.slider').slick({
    autoplay:true,
    slidesToShow:2,
    slidesToScroll:2
  });
});
</script>

$(function(){

$('.slider').slick({

autoplay:true,

slidesToShow:2,

slidesToScroll:2

});

</script>

adaptiveHeightで高さを可変させる

『adaptiveHeight』を設定するとスライドの高さに応じてスライダーの高さを可変させる事ができます。

少しわかりにくいのでドットを表示した状態で見比べるといいと思います。

SAMPLE 『adaptiveHeight』で高さを可変させる

①

②

③

『adaptiveHeight:true』設定したもの表示中のスライドの高さに合わせて可変する

<script>
$(function(){
  $('.slider').slick({
    dots:true,
    adaptiveHeight:true
  });
});
</script>

$(function(){

$('.slider').slick({

dots:true,

adaptiveHeight:true

});

</script>

『adaptiveHeight』なしの場合は一番高さがあるスライドの高さで固定されます

SAMPLE 『adaptiveHeight』なしの場合

①

②

③

センターモードを使う

『センターモード』を使うとスライドの両端に前後のスライドをチラ見せすることができます。

使う場合は『centerMode』のオプションを設定を「true」にします。

『centerPadding』はデフォルトで50pxが設定されているので、そのままでも使えますが、必要に応じて『centerPadding』でどれぐらいチラ見せするか値を文字列形式で単位を付けて指定する必要があります。

値を100pxにしたい場合は’100px’と記述します

SAMPLE 『センターモード』を使う

①

②

③

<script>
$(function(){
  $('.slider').slick({
    autoplay:true,
    centerMode:true,
    centerPadding:'100px'
  });
});
</script>

$(function(){

$('.slider').slick({

autoplay:true,

centerMode:true,

centerPadding:'100px'

});

</script>

asNavForを使ってサムネイルと連動させる

少しコードが長くなりますが『asNavFor』のオプションを使うとサムネイルと連動したスライダーを実装することができます。

SAMPLE 『asNavFor』を使ってサムネイルと連動させる

①

②

③

④

⑤

⑥

①

②

③

④

⑤

⑥

同じスライドで2つ分のスライダーを作れるようにしていきます

<div class="slider">
  <div class="slider_item slider_item1">①</div>
  <div class="slider_item slider_item2">②</div>
  <div class="slider_item slider_item3">③</div>
  <div class="slider_item slider_item1">④</div>
  <div class="slider_item slider_item2">⑤</div>
  <div class="slider_item slider_item3">⑥</div>
</div>
<div class="thumbnail">
  <div class="slider_item slider_item1">①</div>
  <div class="slider_item slider_item2">②</div>
  <div class="slider_item slider_item3">③</div>
  <div class="slider_item slider_item1">④</div>
  <div class="slider_item slider_item2">⑤</div>
  <div class="slider_item slider_item3">⑥</div>
</div>

</div>

</div>

それぞれのスライダーにslickの設定をしていきます

クラス『slider』はクラス「thumbnail」と連携させるために『asNavFor:’.thumbnail’』とオプションを追加し、自動再生と矢印を非表示にしました。

クラス『thumbnail』はクラス「slider」と連携させるために『asNavFor:’.slider’』とオプションを追加します。他には、スライド5枚をすべて表示できるように「slidesToShow:3」とセンターモード用の「centerMode: true」を設定しておきます。

「focusOnSelect: true」はクリックしたスライドをアクティブにし、中央に寄せるようにできるオプションです。

<script>
$(function(){
  $('.slider').slick({
    arrows:false,
    autoplay:true,
    asNavFor:'.thumbnail'//.thumbnailと連携
  });
  
  $('.thumbnail').slick({
    arrows:false,
    asNavFor:'.slider',//.sliderと連携
    slidesToShow:3,
    centerMode: true,
    focusOnSelect: true
  });
});
</script>

$(function(){

$('.slider').slick({

arrows:false,

autoplay:true,

asNavFor:'.thumbnail'//.thumbnailと連携

});

$('.thumbnail').slick({

arrows:false,

asNavFor:'.slider',//.sliderと連携

slidesToShow:3,

centerMode: true,

focusOnSelect: true

});

</script>

あとはサムネイルのどれがアクティブになっているかを表現するためにcssを追加します。

.thumbnail .slick-slide{/*アクティブではないスライド*/
  opacity: 1;
}
.thumbnail .slick-current{/*アクティブなスライド*/
  opacity:.5;
}

.thumbnail .slick-slide{/*アクティブではないスライド*/

opacity: 1;

}

.thumbnail .slick-current{/*アクティブなスライド*/

opacity:.5;

}

画像の遅延読み込み

lazyLoadを設定すると画像の遅延読み込みを設定することができます。

ondemand：画像がスライドし始めたタイミングで画像を読み込む。
progressive：ページが読み込まれた後に非表示の画像を読み込む。

使う場合、img要素の書き方を変える必要があり、src属性を『data-lazy属性』に変更する必要があります

<div class="slider">
  <div class="slider_item"><img data-lazy="img1.png" alt=""></div>
  <div class="slider_item"><img data-lazy="img2.png" alt=""></div>
  <div class="slider_item"><img data-lazy="img3.png" alt=""></div>
</div>

</div>

どちらの値も文字列として扱う必要がありますのでクォーテーションで囲んで使ってください。

ondemand

<script>
$(function(){
  $('.slider').slick({
    autoplay:true,
    lazyLoad:'ondemand'
  });
});
</script>

$(function(){

$('.slider').slick({

autoplay:true,

lazyLoad:'ondemand'

});

</script>

progressive

<script>
$(function(){
  $('.slider').slick({
    autoplay:true,
    lazyLoad:'progressive'
  });
});
</script>

$(function(){

$('.slider').slick({

autoplay:true,

lazyLoad:'progressive'

});

</script>

UI系のオプション

ユーザーの操作に関するオプションはデフォルトのままで充分だと思うので、使用頻度は高くはないとは思いますが、作るものや状況によって必要になってくるので押さえておきたいところです

これらのオプションはサンプルなしでも大丈夫だと思うので省いています

オプション名	デフォルト値	使える値や仕様
accessibility	true	矢印キーでスライドの切り替えができる ※ falseでできなくなる
swipe	true	横方向のスワイプやマウスカーソルのドラッグでスライド切り替えができる ※ 『vertical:true』が設定されていないとき有効
swipeToSlide	false	slidesToScrollを設定していてもユーザーがスライドを直接ドラッグまたはスワイプすることできるようになる設定 ※ trueでできるようになる
verticalSwiping	false	垂直方向のスワイプやマウスカーソルのドラッグでスライド切り替えができる ※ 『vertical:true』が設定されているとき有効
focusOnSelect	false	クリックやタッチしたスライドにフォーカスをさせるための設定 ※ tureで有効にしていても、フォーカスされているスライドをクリック場合は意味がない
pauseOnHover	true	スライダー上にマウスカーソルが乗った時スライドの自動再生を一時停止するかどうかの設定 ※ falseで止まらなくなる
pauseOnDotsHover	true	ドットインジケーター上にマウスカーソルが乗った時スライドの自動再生を一時停止するかどうかの設定 ※ falseで止まらなくなる
pauseOnFocus	true	スライダーをフォーカスした時に自動再生を一時停止するかどうかの設定 ※ falseで止まらなくなる
draggable	true	マウスカーソルでのドラッグでスライド切替えする設定
touchMove	true	タッチでスライドさせる
edgeFriction	0.15	infinite:false時にカルーセルの両端（スライドがない方向）をスワイプしたときの遊びを設定する値 ※1でスライドの大きさと同じ、0.5でスライドの半分、0にすると一切動かなくなる
touchThreshold	5	マウスドラッグやスワイプでスライドを移動させるために必要な距離を指定する設定（1/指定した数値） ※ デフォルトだと5なのでスライドの1/5（20％）2にすると1/2なので（50％）スライドの半分までドラッグすると切り替わるようになる
waitForAnimate	true	スライドアニメーション中に別のスライドへのスライドを無効にする設定

レスポンシブ用のオプション

slickにはレスポンシブ対応用のオプションも用意されているのでウインドウ幅やスライダーの幅によってオプションを切り替えて表示することも可能になっています。

他のオプションと違って記述の方法が少し大変ですが必要に応じて設定できると役に立ちます

オプション名	デフォルト値	使える値や仕様
responsive	none	値は配列形式で中にはオブジェクトを入れて使う。オブジェクトの中には『breakpoint』と『settings』を入れてるオブジェクトはカンマ区切りで複数指定可能
breakpoint		ブレイクポイントを数値で指定するオプション
settings		responsive内のオブジェクトで使う。値はブレイクポイントに達したときに使いたいslickのオプションをオブジェクト形式でまとめる
respondTo	window	レスポンシブの判断基準となるものを文字列で設定 window→ウインドウを基準に slider→スライダー本体を基準に min→windowとsliderを比べて小さいほうを基準に
mobileFirst	false	breakpointの値をどう扱うかの設定デフォルトのfalseはbreakpointに設定した値未満かどうかで判定 trueだとbreakpointに設定した値よりも大きいかで判定

responsiveを使う

説明が難しいのでコードを見てもらうのが一番だと思います

ここでは通常時はスライドを2枚表示しておいて、ウィンドウ幅が768px以下になった時にスライドを1枚にし、センターモードで表示するような設定をしています

SAMPLE 『responsive』を使う

①

②

③

④

⑤

⑥

<script>
$(function(){
  $('.slider').slick({
    autoplay:true,
    slidesToShow:2,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          slidesToShow:1,
          centerMode:true,
          centerPadding:'100px'
        }
      }
    ]
  });
});
</script>