よく使う割に忘れる。
Slick.jsについて
jQueryプラグインなのでjQueryライブラリと併記する必要がある。
ついでに、cssも汎用のやつとテーマのやつがあるんで4つ読み込む必要がある。
やっていく
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">記載箇所は<head>内で大丈夫。
で、スライド部を組んでjsを適用して、用途に合わせてOptionで調整する。
<script>
$(function(){
$('#slider').slick();
})
</script>
<ul id="slider">
<li><img src="https://placehold.jp/400x300.png" alt=""></li>
<li><img src="https://placehold.jp/400x300.png" alt=""></li>
<li><img src="https://placehold.jp/400x300.png" alt=""></li>
<li><img src="https://placehold.jp/400x300.png" alt=""></li>
<li><img src="https://placehold.jp/400x300.png" alt=""></li>
</ul>こんなかんじ。これはidだけどclassでもいける。
$(function(){
$('#slider').slick({
autoplay: true,
arrows: false,
fade: true,
swipe: false,
infinite: true,
autoplaySpeed: 6000,
speed: 1000,
pauseOnHover: false,
});
})optionを書くと例えばこんな感じ。responsiveを使えばbreakpointを指定してoptionの振り分けが可能。
記事は色々あるけど、これが一番わかりやすかった。
初期値と役割が併記されてるのでわかりやすい。
最近よく使うoption
$(function(){
$('#slider').slick({
autoplay: true, //自動遷移有効
arrows: false, //スライド送りボタン非表示
fade: true, //フェード効果でスライド切替
swipe: false, //マウス・タップ操作受付無効
infinite: true, //スライドの最初と最後を繋ぐ
autoplaySpeed: 6000, //スライド表示時間
speed: 1000, //スライド切替開始～完了時間
pauseOnHover: false,
});
})cssのanimationとかkeyframeを使った応用
表示したときに横に動いてるとか拡大してるとか、そういうスライドを見たことがあると思う。
それらはcssでフォローすれば実現できる。
表示時拡大する場合
とりあえずこう組んだとする。
<script>
$(function(){
$('#slider').slick({
autoplay: true,
arrows: false,
fade: true,
swipe: false,
infinite: true,
autoplaySpeed: 6000,
speed: 1000,
pauseOnHover: false,
});
})
</script>
<ul id="slider">
<li><img src="https://placehold.jp/400x400.png" alt=""></li>
<li><img src="https://placehold.jp/400x400.png" alt=""></li>
<li><img src="https://placehold.jp/400x400.png" alt=""></li>
<li><img src="https://placehold.jp/400x400.png" alt=""></li>
<li><img src="https://placehold.jp/400x400.png" alt=""></li>
</ul>cssはこうする。
ul{
width: 400px;
height: 400px;
}
ul li{}
ul li img{}
ul li.slick-active img{
animation-name: slider;
animation-duration: 6.5s;
animation-timing-function: ease-out;
}
@keyframes slider{
0%{
transform: scale(0.9);
}
100%{
transform: scale(1);
}
}拡大・縮小をwidthで指定するとカクカクするんで、scaleで指定したほうがいい。
slick.jsは表示するものには「.slick-active」がつくのでそれを活用する。
これ系で気をつけないといけないのは、画像の効果時間とスライドの時間との調整。噛み合わないと、表示中に画像の拡大がリセットされたり終わってないのに次のスライドに行ったりで、かっこ悪いというか完全に失敗する。
keyframeは「.slick-active」に適用する。classが付与される度にアニメーションが起動するようになる。だから繰り返しの命令は書かなくていい。アニメーションの時間はslick.js1回の処理時間に収まるようにするのがミソ。超過すると切替の最後でサイズが急にズレる。
元の方にアニメーションを付けるとjsの回転と処理時間をぴったり合わせる必要があり、それぞれの読み込み→処理開始の誤差とかタイミングとかを調整しなきゃいけないししたところで確実じゃないんで向かない。無理筋。fadeで切り替える場合、開始と終了の画像が重なるんで微妙というか無理がある。あと、初期値だとアニメーションは1回で終了するのでanimation-iteration-count:infinite;を指定する必要があるんだけど、ズレがあった場合回転するにつれてズレがどんどんひどくなるのでやっぱり向かない。
読み込み時に一瞬表示されるアレ対策
jsの適用がワンテンポ遅れるので、ページ表示時に一瞬スライダーの中身が全部表示されてしまう。かっこ悪いので対策したほうがいい。
.slider{
opacity: 0;
transition: opacity .3s linear;
}
.slider.slick-initialized{
opacity: 1;
}js適用時に付与されるclassがあるんで、slickに指定する用のidなりclassと絡ませてどうのこうのする。どうのこうのは色々と選べるんで都合のいいのをやっていく。
コメント