スライダープラグイン「Slick」便利なオプション&動きサンプル集

Slickの便利なオプションと動きサンプルを分かりやすくまとめています。
オプションやサンプルは今後もどんどん追加していきます。

#1. よく使うオプション
数多く用意されているSlickのオプションの中でも、知っておくと便利な定番オプション。
##1-1. 表示に関するオプション

| 項目      　　　　　　| デフォルト | 仕様  　　　　　　　　　　　　　|
|:-----------------|:-----------------:|:-------------------| 
| arrows         　　| true            |左右矢印を表示する |
| dots         　　| false            |ドット（ページ送り）を表示する |
| slidesToShow        | 1            | スライダーの表示数|
| slidesToScroll       | 1            | 一度にスライドする数|
| adaptiveHeight       | false            | trueの場合、高さ可変。faleseの場合、高さ固定。|
| centerMode       | false            | センターモード（＝両端見切れ状態）になる【2-4.参照】|
| centerPadding       | '50px'  　      | センターモード時、見切れたコンテンツの幅をpx指定できる|
| asNavFor         　　| null            |スライダーを他のスラーダーのナビゲーションとして連携する【2-5.参照】 |
| lazyLoad         　　| ondemand            |画像読み込みのタイミングを設定する。（※注1）<br>・ondemand：画像をスライドさせると画像を読み込む。<br>・progressive：ページが読み込まれた後に非表示の画像を読み込む。 |
（※注1）lazyLoadを利用したい画像はdata-lazyで記述する。

```html:
<img data-lazy="sample.jpg" alt="サンプル" />
```

##1-2. 動きに関するオプション
| 項目      　　　　　　| デフォルト| 仕様  　　　　　　　　　　　　　
|:-----------------|:-----------------:|:-------------------|   
| infinite         　　| true            |無限にスライドする |
| fade          　　　| false            | trueの場合、スライド切り替え時にフェードインアウトする （*誤ってvertical:trueと使用するとうまく機能しません）|
| speed          　　　| 300            | フェードのスピード|
| autoplay           | false            | trueの場合、自動再生する|
| autoplaySpeed          　　　　　| 3000            | 自動再生時のスライド切り替えのスピード|
| vertical         　　　| false            | 縦方向にスライドする【2-2.参照】|

##1-3. ユーザーの操作に関するオプション
| 項目            | デフォルト　　　　　　　　　　| 仕様  　　　　　　　　 　　　　　
|:-----------------|:-----------------:|:-------------------| 
| accessibility          　　　　　　　　　　　　  | true | タブまたは矢印でスライド切り替えができる|
| swipe            | true| スワイプできる|
| verticalSwiping    　　 | false| 垂直方向にスワイプできる【2-2.参照】|
| focusOnSelect　　　　　　　　　　　　　| false| trueの場合、コンテンツをタッチすると中央にフォーカス（=移動)する。中央のコンテンツをタッチしても動きはない。【2-4.参照】|
| pauseOnHover | true| マウスオーバー中は、スライドを停止する|
| pauseOnFocus | true| スライダをフォーカス（ドットのクリック）した時に自動再生を一時停止する|

##1-4. カスタマイズのためのオプション
| 項目      　　　　　　| デフォルト| 仕様  　　　　　　　　　　　　　
|:-----------------|:-----------------:|:-------------------| 
| prevArrow            | `<button type="button" class="slick-prev">Previous</button>`            | 前矢印のHTMLカスタマイズ|
| nextArrow            | `<button type="button" class="slick-next">Next</button>`            | 後矢印のHTMLカスタマイズ|

##1-5. レスポンシブ
| 項目      　　　　　　| デフォルト| 仕様  　　　　　　　　　　　　　
|:-----------------|:-----------------:|:-------------------| 
| responsive            |             | 画面幅でオプションの設定を変更できる|
| breakpoint            |             | 画面幅の指定（指定px以下に適応する）|
| settings            |             | この中に変更したいオプションを設定する|
```php:

$('.slick-slider').slick({
  slidesToShow: 3,
  slidesToScroll: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
      }
    },
    {
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});
```
#2. 定番のスライドサンプル集
サイトでよく見るスライドのサンプルをまとめています。

##2-1. 一面横スライド
【[DEMO1](https://tools.nobol-lab.com/slick-exmples/demo1.php)】
<img width="852" alt="demo1.png" src="https://qiita-image-store.s3.amazonaws.com/0/287877/1af95c55-f78a-b759-f818-c7dbb1ecb2a1.png">

```js:
  $('.slider-1').slick({
    autoplay: true,
    autoplaySpeed: 3000,
    dots: true,
    arrows: false,
  });
```

##2-2. ニュースティッカー
トップページで新着情報やお知らせ等が１行で流れてくる動き。
【[DEMO2](https://tools.nobol-lab.com/slick-exmples/demo2.php)】
![demo2.png](https://qiita-image-store.s3.amazonaws.com/0/287877/d8028fe7-17dc-3074-2187-f51cdf3eaf31.png)

```js:
  $('.slider-2').slick({
    autoplay: true,
    autoplaySpeed: 2000,
    fade: false,
    speed: 1000,
    arrows: false,
    vertical: true,
    verticalSwiping: true,
    slidesToShow: 1,
    slidesToScroll: 1,
  });
```
*`vertical`のtrue設定で、垂直スライドになる。
*`verticalSwiping`のtrue設定で、垂直方向にスワイプが可能。`vertical`では、`swipe`でスワイプできない。

##2-3. 複数コンテンツの同時横スライド

【[DEMO3](https://tools.nobol-lab.com/slick-exmples/demo3.php)】
<img width="844" alt="demo3.png" src="https://qiita-image-store.s3.amazonaws.com/0/287877/241ed7e2-660a-4114-05ec-8aa50a86b0be.png">

```js:
  $('.slider-3').slick({
    autoplay: true,
    autoplaySpeed: 4000,
    arrows: true,
    slidesToShow: 3,
    slidesToScroll: 1,
  });
```
上の設定は、常に3コンテンツが表示され、１つずつ横スライドする。一度にスライドするコンテンツの数は、`slidesToScroll`で設定。

##2-4. 両端が見切れる（=センターモード）スライド
【[DEMO4](https://tools.nobol-lab.com/slick-exmples/demo4.php)】
<img width="762" alt="demo4.png" src="https://qiita-image-store.s3.amazonaws.com/0/287877/6c1be1a3-6809-49e4-4474-16e200cac961.png">


```js:
  $('.slider-4').slick({
    autoplay: true,
    autoplaySpeed: 4000,
    arrows: true,
    slidesToShow: 1,
    centerMode: true,
    centerPadding: '100px',
    focusOnSelect: true,
  });
```
*`centerMode`のtrue設定で、センターモード（両端見切れ状態）になる。その際の`slidesToShow`は、見切れずに表示されるコンテンツ数。
*`centerPadding`で見切れるコンテンツの幅をpx指定。（デフォルト：50px）
*`focusOnSelect`ど真ん中のコンテンツ以外をクリックすると、ど真ん中まで移動（＝フォーカス）する。センターモードにする際は、セットで設定しておくとユーザーフレンドリーかも。

*センターのコンテンツを目立たせたい場合は、`.slick-center`が付与されているのでCSS調整可能。

##2-5. スライドの連携
【[DEMO5](https://tools.nobol-lab.com/slick-exmples/demo5.php)】
![demo5.png](https://qiita-image-store.s3.amazonaws.com/0/287877/31faec0f-ca68-3db6-8cf6-1ba24dc5225e.png)

```js:
  $('.slider-5-thum').slick({
    arrows:false,
    asNavFor:'.slider-5-nav',
  });
  $('.slider-5-nav').slick({
    asNavFor:'.slider-5-thum',
    focusOnSelect: true,
    slidesToShow:3,
    slidesToScroll:1,
    centerMode: true,
  });
```
`asNavFor`で、連携したいスライドのclassもしくはidをそれぞれ記載する。

##2-6. 画像ナビゲーション
画像ナビをクリックすると、メインの画像が切り替わるスライダー。
「2-5.スライド連携」のスライダーは画像ナビの表示件数が固定であるのに対し、本スライダーは件数の変化に対応できる。
`.slick-dots`のドットを画像に置き換えて、画像ナビゲーションを作成。

```js:
  $('.slider').slick({
    lazyLoad: 'progressive', //LazyLoad使う場合
    dots:true,
    customPaging: function(slick,index) {
      // スライダーのインデックス番号に対応した画像のsrcを取得
      var targetImage = slick.$slides.eq(index).find('img').attr('data-lazy');
      // slick-dots > li　の中に上記で取得した画像を設定
      return '<img data-lazy=" ' + targetImage + ' "/>';
    }
  });
```
*LazyLoadを使う場合は、"progressive"を設定。（でないと画像ナビが表示されない）

参考にしたサイト：[イメージナビゲーションとスライダーの作成方法](https://qiita.com/milneo/items/3c5d19105862b617d507)

#3. 解決事例集
##ユーザーがドットをクリック（＝フォーカス）操作すると、自動再生が停止してしまう。
=> `pauseOnFocus: false`を設定すると、フォーカスしても自動再生が再開する。

##ロード時に一瞬縦並びになる

スライダーが初期化（読み込み完了）した時点で付与されるクラス`.slick-initialized`を利用し、CSSで調整可能。

```css:
.slider_sample {
  opacity: 0;
  transition: opacity .3s linear;
}
.slider_sample.slick-initialized{
  opacity: 1;
}
```

参考にしたサイト：[【slick】ロード時に一瞬縦並びになるのをCSSで解決する](https://www.granfairs.com/blog/staff/slick-solve-tandem)

##slidesToShowよりコンテンツ数が少ない場合や同じ数の場合バグが起こり表示がおかしくなる。
以下の１）or ２）設定をすることで回避可能。

１）slidesToShowの設定数 = コンテンツ数の場合（ナビゲーションをスライドさせず固定したい場合）
「slidesToShow」「slidesToScroll」を同じ数にする。

２）slidesToShowの設定数 <= コンテンツ数の場合
以下のサイトを参考にさせていただきました。
　https://gakuya.work/slick-js-thumbnail-important-point/