slick.jsで要素が画面内に入ったときにautoplayを開始する方法

2020年2月4日

jQueryプラグインのslick.jsで要素がブラウザの画面内(ビューポート)に入ったときにautoplayを開始する方法を紹介します。

どうやるか

デフォルトではオプションをautoplay:true;に設定した上で、slick(‘slickPause’)を実行しておきます。

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”というメソッドを使用します。

slickSetOption