slick.jsでカルーセルスライダーを
実装＆カスタマイズしてみるデモページ

ex01: 1枚表示のスライダー（画像配置）

一番シンプルなスライダーです。jQueryの記述もオプションに何も付けていないベーシックの状態です。
（左右の矢印ボタンだけ、slick-theme.cssでの指定を黒に変更しました）

ex02: 1枚表示のスライダー（div要素配置）

一番シンプルなスライダーです。こちらはdiv要素をスライドさせています。中の数字はテキストです。

ex02': キャプション付きのスライド

ex02のdivスライドの応用です。ここではfigureタグを使用しています。
横スクロールだと文字の切り替わりが酔いそうだったのでフェード切り替えにしました。

ex03: スライダーを自動再生させる

オプションの「autoplay: true,」を追加すると、スライダーが自動再生されます。

ex04: スクロール切り替えではなくフェード切り替えにする

「fade: true,」でスライド切り替えがフェードになります。
フェード切り替えの場合、切り替えスピードがデフォルト値（300）だと若干早いので、「speed: 600,」など数値を大きくするオプションを併用するとフワッとした切り替わりになります。

ex05: 複数枚のスライドを同時に表示させる

「slidesToShow: 3,」にしたことで、一度に表示されるスライドが3枚になりました。

「画像が小さくなったから勝手に3枚になったんじゃないか？」という疑念があるので、同じソースでclassだけ「スライダーを自動再生させる」で使用したautoplayにしてみます。

「slidesToShow」のデフォルト値がスライド1枚の表示なので、本当に1枚です。

ex06: スライドを数枚ずつスクロールさせる

「slidesToShow: 3,」にしたことで一度に表示されるスライドが3枚になり、「slidesToScroll: 3,」にしたことで一度に3枚ずつスライドされるようになりました。

ex07: 流れるようにスムーズにスクロールさせる

「slidesToShow: 3,」にしたことで一度に表示されるスライドが3枚になり、「cssEase: 'linear',」でスクロールの動きが均一となります（デフォルトの'ease'は中ほどが早い）。「autoplaySpeed」は切り替わるまでの静止時間なので、これを「0」とすることで止まらずスクロールし続けることになります。「speed」はデフォルトの「300」だと早すぎるので「5000」にしています。

ex08: 左右の「前へ」「次へ」ボタンを非表示にする

「前へ」「次へ」ボタンの表示の指定はオプションの「arrows」になります。デフォルトで「true」で表示されるので、非表示にしたいときは「false」にします。

ex09: スライダーの下にページ送りのドットを表示させる

スライダーの下にページ送りのドットの表示の指定はオプションの「dots」になります。デフォルトで「false」で非表示なので、表示させたいときは「true」にします。

ex10: スライド画像の読み込みタイミングを調整する

ここでは「lazyLoad: 'ondemand',」のデモになります。画像が多くてページ読み込みが遅い場合にページ下部にあるスライダーに使用するかな。
上記の例では4枚スライド画像を設置しているので、最初の1周目が遅延読み込みがかかります。軽い画像なのでそこまで違和感は無いのですが、重い画像だと読み込み時の空白が目立ちます。

ex11: 前後のスライドをちょい見せしたい

「centerPadding: '60px',」で、両側（前後）のスライドが60px見えています。
スライド画像の大きさをCSSで「width: 100%;」にしています。スライドの親要素はjQueryの指定によって幅が変化しますので、それに合わせる形です。もしかしてwidthを%指定するのが普通のやり方なのかも。

複数枚表示のスライドの場合も同様ですが、 「slidesToShow: 3,」にしてこちらは「width: calc(100% - 10px);」としました。

ex11': 後のスライドをちょい見せしつつ、センターじゃなく左寄せにしたい

「ex11: 前後のスライドをちょい見せしたい」のアレンジ。
軽く考えてex11を「centerMode: false,」にすると、「centerPadding: '60px',」が無効になって普通の1枚表示スライドになってしまう。

imgに「margin-left: -60px;」をかけて左寄せってことにしてみた。

ex11'': ちょい見せの前後のスライドを薄くしたい

こちらも「ex11: 前後のスライドをちょい見せしたい」のアレンジになります。変化がわかりやすいようオートプレイです。
.slick-slide img に「opacity: 0.3;」をかけておいて、カレントになったfigure.slick-slide.slick-currentで「opacity: 1;」をかけるシンプルな対応をしています。

しかし！よく見ると1枚目に設定したAIのバナーが再度戻ってくるときにopacityの反映されるタイミングが他と異なっています。これはcurrent時に付加されるclassのタイミングによるものなようです。
jsの記述を追加することで対応できますので、下記サイトを参考にしてみてください。
参考：slickカルーセルのcenterModeで中央以外を透過にした場合に2周目からがたつく | Qiita

ex12: レスポンシブ（ブレイクポイントで表示を数を切り替える）

ブラウザ幅を伸び縮みさせてみてください（場合によってはリロードが必要かも）。
ここでは～641px、640px～481px、480px～で表示スライド数などを切り替えています。

ex13: 2つのスライダーを連動させる

大きいスライダーと小さく複数表示させているスライダーを連動させることで、サムネイル付きスライダーのように表示させることができます。。

こちらは「responsive」を使いません。cssでスライドの幅を300pxに固定し、ブラウザ幅でトリミングさせる形にします。
「infinite: true, centerMode: true, centerPadding: '0', variableWidth: true,」の合わせ技です。初期表示でスライドの左端が表示されていないなど微妙に不具合があるのですが研究します！

ex15: ドットのカスタマイズ（CSSで無理やり）

要するに該当するcssを上書きでデザイン変更させる強行パターン。あまり褒められたやり方ではないので、解説無しです。

ex16: 左右の「前へ」「次へ」ボタンをカスタマイズ（文字置き換え）

文字の←→に置き換えています。
オプションの「prevArrow、nextArrow」に置き換えたい文字を記述します。ここではspanタグで囲んでオリジナルclass名を付加し、CSSで位置やサイズを調整をしています。

ex17: 左右の「前へ」「次へ」ボタンをカスタマイズ（画像置き換え）

こちらは画像に置き換えています。
基本的に「ex16: 左右の「前へ」「次へ」ボタンをカスタマイズ（文字置き換え）」と同様で、オプションの「prevArrow、nextArrow」で画像を記述します。

ex19: 縦方向スライド

オプション「vertical: true,」で縦スライドモードにします。
「前へ」「次へ」ボタンは変わらず左右に表示されますね（CSSで調整すればいいんですが）。

ex20: ECサイトっぽいサムネが縦に並んだスライド

「ex13: 2つのスライダーを連動させる」のサムネ側のスライドを縦に並べます。スライドの縦横比を計算しておいた方がいいやつですね。
ここではレスポンシブ対応はしない（PCオンリー）前提です。
普通に縦に並べると、前後のサムネイルが半端に切れてしまうため、「ex11': 後のスライドをちょい見せしつつ、センターじゃなく左寄せにしたい」と同様にスライド画像にmargin-topでマイナス、その分margin-bottobでプラスして調整しています。

ex21: プログレスバーを設置する

slickのオプションにはプログレスバーの設定が無いため、HTMLでスライダーの下にバーのベースとなる要素を配置、CSSで装飾後、javaScriptで動きを記述します。
参考：Slick Progressbar | Codepen

ex22: センターモードで中央のスライドだけ大きく

オプション「centerMode: true,」でセンターモードにします。
scriptは基本的にslick公式サイトの[Center Mode]デモのままで、CSSでtransform: scaleや角丸やshadowなどを調整しています。

ex23: スライドにエフェクトをかける（ズーム）

transform: scale(1.0) → transform: scale(1.2)
overflow: hidden;で拡大時にはみ出したところを非表示にしています。
スライドスピードと拡大のスピードを合わせるときれいに見えるので、頑張って調整する。