[jQuery] slick を使ったスライドショー表示

前回 bxSlider を使ったスライドショー表示について書いた。

[jQuery] bxSlider を使ったスライドショー表示 – with a Christian Wife
https://blog.withachristianwife.com/2018/08/24/bxslider/

一応は動くんだけど、前回も書いたとおり、微妙な不具合があるので slick という別の jQuery を使った方法を試してみた。

（１）公式サイトからダウンロード、解凍する。

slick – the last carousel you’ll ever need
http://kenwheeler.github.io/slick/

（２）１の中で使うのは slick ディレクトリ内の以下のみだ。

ajax-loader.gif
fonts ディレクトリ
slick-theme.css
slick.css
slick.min.js

（３）images ディレクトリを作って写真を入れる。1.jpg、2.jpg、3.jpg とする。

（４）slideshow.html とでも名付けたファイルを作り、例えば以下のように記入する。

私が設定したオプションは以下のような感じ。

autoplay: true → 自動再生オン
autoplaySpeed: 10000 → 表示時間を 10 秒に。
infinite: true → 無限ループ

ただ、写真の数が多いとうまく動かなかった。数枚だと問題なし。

ランダム再生の方法もうまくいかなかった。

参考：
レスポンシブに強いカルーセルスライダーslickの使い方 ｜ Gimmick log
http://gimmicklog.main.jp/jquery/549/

jQueryカルーセルスライダー『slick.js』設置方法と設定オプション一覧 | uzurea.net
http://uzurea.net/explanation-of-jquery-slider-slick/

slick.jsを使ったスライド画像をランダム表示する – もっく日記
http://sakamock.hatenablog.com/entry/2017/01/12/132656