slick.jsでシンプルなスライダーを実装する方法(フェード)
たまたまスライダーをリプレイスする案件があり、メモとして残しておきます。至ってシンプルなスライダーです。切り替えのアニメーションとしてはフェードを使っています。
ソースコード
ソースコードだけさくっと見たいよという方はこちらからどうぞ。
https://github.com/supilog/slick_fade
実装
slick.jsダウンロード
公式ページよりslick.jsをダウンロードし、プロジェクトに配置します。(※GitHubリポジトリ参照)
jQuery読み込み
jQueryは今回バージョン3.6を使用しています。CDNを利用しても問題ありません。今回はプロジェクト内にダウンロードしたものを配置しています。(※GitHubリポジトリ参照)
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>slick.js fade</title>
<link rel="stylesheet" type="text/css" href="./slick/slick.css">
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
<style>
body {
margin: 0;
text-align: center;
}
#slider {
width: 50%;
margin: 0 auto;
}
</style>
</head>
<body>
<header>
<h1>slick.js fade</h1>
</header>
<section>
<div id="slider">
<div class="img">
<img src="./img/pic001.jpg">
</div>
<div class="img">
<img src="./img/pic002.jpg">
</div>
<div class="img">
<img src="./img/pic003.jpg">
</div>
<div class="img">
<img src="./img/pic004.jpg">
</div>
</div>
</section>
<script type="text/javascript" src="./slick/slick.min.js"></script>
<script type="text/javascript">
$('#slider').slick({
infinite: true,
speed: 1000,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed: 3500,
arrows: true,
dots: true,
});
</script>
</body>
</html>slick.jsを読み込む
- 9-10行目 slick.css, slick-theme.cssを読み込んでいます
- 46行目 slick.min.jsを読み込んでいます
jQuery読み込み
- 11行目 jquery-3.6.0.min.jsを読み込んでいます
画像の配置
- 30-45行目 画像を4枚配置しています。親のタグにIDを付けておきます。今回は「slider」という名前としました
スライダーを動作させる
- 47-58行目 スライダーを動作させるオプションなどを指定しています。これを記述することでスライダーが動作します
# オプション
infinite : 無限ループするかどうか。デフォルト値はtrue。
speed : 切り替えアニメーションの速さ。デフォルト値は300。切り替え間隔の値はautoplaySpeed。
fade : 切り替えアニメーションをフェードにする。デフォルト値はfalse。
cssEase : アニメーションイージング。デフォルト値はease。
autoplay : 自動で切り替えを行う。デフォルト値はfalse。
autoplaySpeed : 自動切り替えの間隔。デフォルト値は3000。
arrows : 矢印を表示するかどうか。デフォルト値はtrue。
dots : ドットインジケーターを表示するかどうか。デフォルト値はfalse。アプリ確認
動作させてみた結果がこちらです。
https://supilog.github.io/slick_fade/
こちらを利用して無事にリプレイスすることが出来ました。
【注意】「矢印のオプションをtrueにしたのに表示されてないやんけ！」という方がいらっしゃるかもしれません。ごめんなさい。表示されているのですが、背景が白のため見えていないだけです。そこに矢印はちゃんと居ますｗ
Special Thanks
■テスト用画像
- 写真AC(https://www.photo-ac.com/)
