個人的に、まだまだ使用する機会が多いjQueryのプラグインslick。その小技をまとめてみた。
基本のslick
<div class="c-slick js-slick">
<div class="c-slick__item">
<img src="image1.jpg" width="400" height="300" decoding="async" fetchpriority="high" alt="">
</div>
...
</div>
上記のhtmlのclass="js-slick"にslickを適用する。
$(function() {
$('.js-slick').slick({
// slickのオプション設定
autoplay: true,
arrows: false,
dots: true,
}):
});
必要に応じてslickのオプションを設定する。上の例の場合は、自動再生あり、前後の矢印ボタンなし、ページネーションのドット表示となっている。
スライドの端を少し見せる
両端を少し見せる
$(function() {
$('.js-slick').slick({
centerMode: true,
centerPadding: '35px',
slidesToShow: 2,
...
});
});
centerMode: trueで中央揃えモードが有効になる。
centerPaddingで中央揃えモードのスライド両端のパディング（＝どの程度左右に見せるか）を指定する。指定できる単位はpxまたは%、サイズが大きいほど見える領域も大きくなる。
centerPaddingの値は、slick-listのpaddingとして適用される。
<div class="c-slick js-slick slick-initialized slick-slider">
<div class="slick-list draggable" style="padding: 0px 35px;">
<div class="slick-track" style="opacity: 1; width: 3165px; transform: translate3d(-1688px, 0px, 0px); transition: transform 500ms;">
...
</div>
</div>
</div>
slidesToShowで設定されるスライドは数には、両端のスライドは含まれない。
片側を少し見せる
片側の場合は、centerMode centerPaddingの指定はせず、slick-listに対してcssでpadding設定を行う。
.slick-list {
// 左側を見せる場合
padding-left: 35px;
// 右側を見せる場合
padding-right: 35px;
}
スライドの端を少し見せる例
中央の画像を大きくする
中央に来たスライダーを大きく見せて強調したい場合に使える。
$(function() {
$('.js-slick').slick({
centerMode: true,
...
});
});
centerMode: trueでスライドを中央配置にする。
<div class="c-slick js-slick slick-initialized slick-slider slick-dotted">
<div class="slick-list draggable" style="...">
...
<div class="c-slick__item slick-slide slick-current slick-center" data-slick-index="1" aria-hidden="false" tabindex="0" role="tabpanel" id="slick-slide00" aria-describedby="slick-slide-control00"> //
<img src="image.jpg" width="200" height="400" decoding="async" alt="" class="c-slick__img">
</div>
...
</div>
</div>
中央のスライダー要素にslick-centerが付与されるので、このclassに対してcssを設定する。
/* 通常のスライド画像 */
.c-slick__img {
transform: scale(0.8);
transition: transform .3s linear;
}
/* 中央のスライド画像 */
.slick-center .c-slick__img {
transform: scale(1);
}
通常のスライド画像のサイズを縮小（0.8）し、slick-centerが付与されたときに画像が元のサイズ（1）に戻るようにする。transitionプロパティを設定することで、拡大・縮小がスムーズになる。
画面のスクロールでslickが発動するようにする
スクロールしてスライダーが画面に入ったタイミングでslickを発動する。
$(function() {
const slider = $(".js-slick");
slider.slick({
autoplay: false,
arrows: false,
dots: true,
infinite: true,
variableWidth: true,
centerMode: true,
slidesToShow: 5,
pauseOnFocus: false,
pauseOnHover: false,
});
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
slider.slick("slickPlay");
} else {
slider.slick("slickPause");
}
});
},
{
root: null,
rootMargin: "-50% 0px",
threshold: 0,
}
);
observer.observe(slider[0]);
});
デフォルトではautoplay: falseにしておく。
Intersection Observerを使ってターゲット要素とビューポートとの交差を検知する。画面に入ったらslickを発動（slickPlay）、画面から外れたらslickを止める（slickPause）。
jQueryオブジェクトsliderからslider[0]で実際のDOM要素を取得して、Intersection Observerで使用できるようにしている。
中央の画像を大きくする＋画面スクロールでslick発動の例
自動再生でランキング形式のスライダーを見せている場合、画面に入った時だけslickが発動すると最初（または中断した所）から見られて親切だと思う。
読み込み時のチラつき、スライダーが縦に並ぶのを防ぐ
ページの読み込みが遅い時などに、スライダー画像が一瞬拡大されたり縦並びになったりすることがある。
その対応策として、slickが読み込まれたタイミングで表示させるという方法がある。
<div class="c-slick js-slick slick-initialized slick-slider slick-dotted">
<div class="slick-list draggable" style="padding: 0px 50px;">
<div class="c-slick__item slick-slide slick-current slick-center" data-slick-index="1" aria-hidden="false" tabindex="0" role="tabpanel" id="slick-slide00" aria-describedby="slick-slide-control00">
<img src="image.jpg" width="200" height="400" decoding="async" alt="" class="c-slick__img">
</div>
...
</div>
</div>
スライダーが初期化（読み込み完了）されるとslick-initializedというclassがスライダーに付与される。このclassに対してcssでスタイルを付ける。
その1：displayプロパティを変える
.c-slick {
display: none;
}
.c-slick.slick-initialized {
display: block;
}
スライダーが読み込まれるまでは非表示、読み込まれてslick-initializedが付与されたら表示する。
その2：opacityプロパティを変える
.c-slick {
opacity: 0;
transition: opacity 0.3s;
}
.c-slick.slick-initialized {
opacity: 1;
}
displayではなくopacityプロパティを変える方法。displayの方は切り替えがはっきりしているのに対して、opacityの方はtransitionプロパティと組み合わせることで滑らかな遷移になる。
スライダーエリアが一瞬空白にはなるが、見た目的には上手く誤魔化せ解消されていると思う。
参考ページ
☕コーヒーをおごる
