slick.jsで要素が画面内に入ったときにautoplayを開始する方法
jQueryプラグインのslick.jsで要素がブラウザの画面内(ビューポート)に入ったときにautoplayを開始する方法を紹介します。
どうやるか
デフォルトではオプションをautoplay:true;に設定した上で、slick(‘slickPause’)を実行しておきます。
コード
$(function () {
// スリックの設定
$('#yourTargetCarousel').slick({
infinite: true,
slidesToShow: 2,
slidesToScroll: 2,
dots: true,
autoplay: true,
autoplaySpeed: 3000,
speed: 1500,
responsive: [
{
breakpoint: 767,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}
]
}).slick('slickPause');
// ビューポートに入ったときに設定を変更する関数
function triggerScroll(targetObj) {
let targetName = targetObj.attr("id"); //確認用
let targetFlag = false;
let scrollTop = $(window).scrollTop();
let scrollBottom = scrollTop + $(window).height();
let targetTop = targetObj.offset().top;
let targetBottom = targetTop + targetObj.height();
// ロード時の表示用
if (scrollBottom > targetTop && scrollTop < targetBottom) {
if (!targetFlag) {
console.log(targetName + ' is in sight'); //確認用
targetObj.slick('slickPlay');
targetFlag = true;
}
} else {
console.log(targetName + ' is not in sight'); //確認用
targetObj.slick('slickPause');
targetFlag = false;
}
$(window).on('scroll', function () {
scrollTop = $(window).scrollTop();
scrollBottom = scrollTop + $(window).height();
targetTop = targetObj.offset().top;
targetBottom = targetTop + targetObj.height();
if (scrollBottom > targetTop && scrollTop < targetBottom) {
// スクロール位置に来たときにautoplayを開始
if (!targetFlag) {
console.log(targetName + ' is in sight');//確認用
targetObj.slick('slickPlay');
targetFlag = true;
}
} else {
// 見えなくなったらautoplayを停止
if (targetFlag) {
console.log(targetName + ' is not in sight');//確認用
targetObj.slick('slickPause');
targetFlag = false;
}
}
});
}
triggerScroll($('#yourTargetCarousel'));
});
おまけ
その他の値をトリガーに合わせて変更したい場合は”slickSetOption”というメソッドを使用します。