[jQuery] slick を使ったスライドショー表示
前回 bxSlider を使ったスライドショー表示について書いた。
[jQuery] bxSlider を使ったスライドショー表示 – with a Christian Wife
https://wacw.cf/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 とでも名付けたファイルを作り、例えば以下のように記入する。
1<html>
2<head>
3
4<link rel="stylesheet" type="text/css" href="slick.css" media="screen" />
5<link rel="stylesheet" type="text/css" href="slick-theme.css" media="screen" />
6<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
7<script src="slick.min.js"></script>
8
9 <script>
10 $(function() {
11 $('.slider').slick({
12 autoplay: true,
13 autoplaySpeed: 10000,
14 infinite: true
15 }
16
17
18 );
19 });
20 </script>
21
22</head>
23<body>
24
25<ul class="slider">
26 <li><img src="images/1.jpg" width="500" height="" alt=""/></li>
27 <li><img src="images/2.jpg" width="500" height="" alt=""/></li>
28 <li><img src="images/3.jpg" width="500" height="" alt=""/></li>
29</ul>
30
31
32</body>
33</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