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

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

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

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

Swiperの基本的な使い方についてはこちらの記事を参照下さい。

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

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

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

コードはこちら。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide swiper-slide01">1 / 6</div>
    <div class="swiper-slide swiper-slide02">2 / 6</div>
    <div class="swiper-slide swiper-slide03">3 / 6</div>
    <div class="swiper-slide swiper-slide04">4 / 6</div>
    <div class="swiper-slide swiper-slide05">5 / 6</div>
    <div class="swiper-slide swiper-slide06">6 / 6</div>
  </div>
</div>

const swiper = new Swiper(".swiper", {
  loop: true, // スライダーをループさせる
  speed: 1500, // スライドの切り替え速度（デフォルトは300）
  autoplay: {
    // 自動再生の設定
    delay: 1000, // 1秒後に次のスライドに自動で切り替える
  },
});

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

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

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

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

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

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

const swiper = new Swiper(".swiper", {
  // スライダーのオプションを設定
  loop: true, // スライダーをループさせる
  speed: 1500, // スライドの切り替え速度（デフォルトは300）
  autoplay: false, // 最初は自動再生を無効
});
// スクロールイベントを検知
window.addEventListener("scroll", function () {
  // スライダーのコンテナ要素を取得
  const sliderContainer = document.querySelector(".swiper");
  // スライダーのコンテナの位置情報を取得
  const rect = sliderContainer.getBoundingClientRect();
  // ウィンドウの高さを取得（クロスブラウザ対応）
  const windowHeight =
    window.innerHeight || document.documentElement.clientHeight;
  if (rect.top < windowHeight && rect.bottom >= 0) {
    // スライダーが画面内に入った場合、自動再生を有効にして開始
    swiper.params.autoplay.delay = 1000; // 自動再生の遅延設定
    swiper.autoplay.start();
  } else {
    // 画面外に出た場合、自動再生を停止
    swiper.autoplay.stop();
  }
});

swiper.params.autoplay.delay = 1000;については無くても大丈夫です。

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

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

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

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