【slick】スクロールして画面にスライダーが表示されたらautoplayを開始する方法

slickのスライダーってスクロールして画面内に入ってからスライダーを開始できる？

通常slickのスライダーはページを開いたら画面に表示されていなくても、autoplay(自動再生)を有効にしていればスライダーは開始してしまいます。

そこで今回はスクロールして画面内にスライダーが現れたら動き出す方法を解説していきます。

slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。

slickでスクロールしてスライダーが画面に表示されたらautoplayを開始する方法

まずは基本となるスライダーはこちらです。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

コードはこちら。

<div class="slick">
  <div class="slick-container">
    <div class="slick-box slick-box01">1 / 6</div>
    <div class="slick-box slick-box02">2 / 6</div>
    <div class="slick-box slick-box03">3 / 6</div>
    <div class="slick-box slick-box04">4 / 6</div>
    <div class="slick-box slick-box05">5 / 6</div>
    <div class="slick-box slick-box06">6 / 6</div>
  </div>
</div>

$(function () {
  // .slick-containerというクラスを持つ要素にSlick Sliderを適用する
  $(".slick-container").slick({
    autoplay: true, // 自動再生を有効にする
  });
});

.slick-slideや.slide-sliderというclass名はslickが独自に使っているので、使うのは避けましょう。

CSSは調整用なので割愛します。

これを画面の下の方にしてみるので『スクロールして下さい』という文字が表示されて3秒くらい待ってからスクロールしてみて下さい。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

スライダーが表示された時点でスライドは何枚か進んでいると思います（右下のRerunをクリックすればリセットされます）

これを下の方にあったとしても、スライダーが画面に表示されるまでは自動再生しないようにしたいと思います。

そのコードはこちらです。

$(function () {
  // .slick-containerというクラスを持つ要素にSlick Sliderを適用する
  const slider = $(".slick-container");
  const windowHeight = $(window).height();

  // Slick Sliderを初期化し、自動再生を無効にする
  slider.slick({
    autoplay: false,
  });
  // スライダーが画面内に入ったときに自動再生を有効にする処理
  slider.on("init", function () {
    // Slick Sliderが初期化されたときの処理
    if (slider.height() <= windowHeight) {
      // スライダーの高さがウィンドウの高さ以下の場合、自動再生を有効にする
      slider.slick("slickPlay");
    }
  });

  $(window).on("scroll", function () {
    const rect = slider[0].getBoundingClientRect();
    if (rect.top < windowHeight && rect.bottom >= 0) {
      // スライダーが画面内に入った場合、自動再生を有効にする
      slider.slick("slickPlay");
    } else {
      // 画面外に出た場合、自動再生を停止
      slider.slick("slickPause");
    }
  });
  // ウィンドウがリサイズされたときに再評価する
  $(window).on("resize", function () {
    if (slider.height() <= windowHeight) {
      // スライダーの高さがウィンドウの高さ以下の場合、自動再生を有効にする
      slider.slick("slickPlay");
    }
  });
});

サンプルはこちらです。『スクロールして下さい』という文字が表示されて3秒くらい待ってからスクロールしてみて下さい。

See the Pen
slick（スクロール対応） by junpei (@junpei-sugiyama)
on CodePen.

今度は1枚目のスライドから動き出したと思います。

また、さらに下にスクロールして画面外になったら自動再生は停止して、再度画面内に表示されたら再開します。