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

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

ex08: 左右の「前へ」「次へ」ボタンを非表示にする ex09: スライダーの下にページ送りのドットを表示させる 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枚表示スライドになってしまう。

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: レスポンシブ（ブレイクポイントで表示を数を切り替える） ex13: 2つのスライダーを連動させる ex14: レスポンシブ（スライドの幅を固定する場合）

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

ex15: ドットのカスタマイズ（CSSで無理やり） ex16: 左右の「前へ」「次へ」ボタンをカスタマイズ（文字置き換え） ex17: 左右の「前へ」「次へ」ボタンをカスタマイズ（画像置き換え）

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

ex18: background-imageで画像を配置（画面幅100%、高さ固定でトリミング） ex19: 縦方向スライド

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

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

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

ex21: プログレスバーを設置する ex22: センターモードで中央のスライドだけ大きく

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

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

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

ex24: 左右交互にスライド方向を変える

左方向に流れるスライド、右方向に流れるスライド、左方向に流れるスライドと積み重ねます。スライドと言いつつ、ここでは横長の一枚画像を使用しています。逆方向（左→右）のスライドはscriptに「rtl: true,」を記述し、かつ親要素に「dir="rtl"」を加えるのを忘れずに。 slickを使わなくても実装できるのですが、他のとこでslick使ってる場合などどうせ読み込んでるjsを活用する手も。ずっと流していると不具合発生するので、もうひとつのやり方の方がいいかもです（※解説記事参照）

📎📎📎📎📎📎📎📎📎📎