少し前に「CSSで実装する手動スライドショー」の話をしていましたが、slickを使った方が圧倒的に簡単だったのでシェアします。
ぶっちゃけCSSで苦労したのがアホらしくなるレベルで便利でした。
slickでできること
これらのオプションはすべてJavaScriptで制御する必要がありますが、記述は非常に簡単なのでネットの記事で十分理解できるレベルです。
多分スライダー系でやりたいことはすべてできると思います。
- 装飾（矢印や点）のない自動スライダー
- 前後の画像が見えるスライダー
- 右から左（逆も可）に無限ループするスライダー
- 中央に来ている画像だけが大きくなるスライダー
- CSSで矢印などのカスタマイズ可能
- レスポンシブ対応（PC、SPで動き方を変えることもできます）
slickの公式サイト翻訳
slickは公式サイトが英語なのですが、有志の方が日本語で翻訳してくださっています。
slickの導入方法からカスタマイズのやり方まで大体全部載ってます。
別のサイトで見たカスタマイズの記述が「わけわからん」というときにも活用できます。
各オプションの簡単な説明と初期値を一覧表でみたい場合はこちらのサイトの方がわかりやすいです。
slickでよく使う（かもしれない）カスタマイズ
矢印や点など基礎的なカスタマイズ
スライダーの初期値など、基礎的なところを解説してくれているサイトです。
前後の画像が見えるスライダーや、中央の画像だけ大きく見えるスライダーのやり方も乗っています。
https://b-risk.jp/blog/2020/01/slick-customize/
レスポンシブ対応
レスポンシブ対応できるslickですが、やり方を詳しくかつわかりやすい書き方をしていないところがほとんどです。
いろいろいじってみたところ、どうやらslickはモバイルファーストではなくPCファーストのようです。
「このブレイクポイントまで縮んだら」という書き方をするのでご注意ください。
一番記述方法が分かりやすいサイトを置いておきます。
https://netanswer.co.jp/blog/89/
右から左へ無限ループするスライダー
要素が自動的に流れてくれるスライダーです。
流れる速さも簡単に調整できるので、ギャラリー系で使えるかもしれません。
slick実装時に想定される不具合と対処法
slickは非常に便利ですが、たまに不具合があるので、それを解決する際に参考にしたサイトまとめです。
【必須】スマホで手動でスライドを切り替えるとautoplayが止まる
以下のサイトを参考にしましたが、「touchmove」はイベントではなくオプションなのでサイト通りに記述すると動きません。
https://qiita.com/mrp_t/items/de21ec327568fc5c3e7f
「touchmove」の部分を「afterChange」に変えれば、「スライド変更後（afterChange）に自動切り替えを開始（slickPlay）する」という記述になり、正しく動きます。
手動で切り替え可能な自動スライダーを実装する時には確実に起こりうるので、必須の記述となります。
スライドがロード直後だけ動きが速い
読み込み中にたまった処理が、表示された直後に一気に処理されることが原因？
画像を背景で実装すれば回避できるようです。
https://teratail.com/questions/87407
無限ループスライダーで画像の間に隙間ができる
ブルーライナー関西⇔福岡・下関のPC版のメインビジュアルを作る際に発生した不具合。
理屈は微妙に理解できていないのですが、スライド幅の自動計算を有効化にすると直りました。
