【jQuery】slick：スクロールして画面に現れたら開始する

※ 当サイトではアフィリエイト広告を利用しています。

こんにちは、meiです。
案件でよく使うスライダー、slick。今回は画面内に要素が入ったらスライドを開始する、というパターンについてです。

スライドの順番に意味がある場合、スムーズに一枚目から閲覧できるようにするのは親切な設計だと思います。
今回のサンプルはこちら（画面をスクロールしてスライダーが”1枚目”から始まっているかご確認ください♪）

jsはこちら▼

const slider = $(".slider");
const windowHeight = $(window).height();
	
slider.slick({
  autoplay: true,
  autoplaySpeed: 2000,
  arrows: true,
  pauseOnFocus: false,
  pauseOnHover: false,		
  dots:false,		
}).slick('slickPause');

$(window).on('scroll', function () {
  let position = $('.slider').offset().top - windowHeight,
      scroll = $(window).scrollTop(); 
  if(scroll >= position) {
    slider.slick('slickPlay');
  }else{
    slider.slick('slickPause');
  }
});

“autoplay: true”を”slickPause”メソッドを使っていったんストップさせます。
そしてスクロールイベントを使って”scroll >= position”、つまり画面内に対象要素であるsliderが入った時に、”slickPlay”メソッドを使ってスライドを開始します。

まとめ

シンプルかつ分かりやすいコードにしてみました。ぜひ使ってみてくださいね！