[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 とでも名付けたファイルを作り、例えば以下のように記入する。
<html>
<head>
<link rel="stylesheet" type="text/css" href="slick.css" media="screen" />
<link rel="stylesheet" type="text/css" href="slick-theme.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="slick.min.js"></script>
<script>
$(function() {
$('.slider').slick({
autoplay: true,
autoplaySpeed: 10000,
infinite: true
}
);
});
</script>
</head>
<body>
<ul class="slider">
<li><img src="images/1.jpg" width="500" height="" alt=""/></li>
<li><img src="images/2.jpg" width="500" height="" alt=""/></li>
<li><img src="images/3.jpg" width="500" height="" alt=""/></li>
</ul>
</body>
</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
Recent Posts
Archives