2023/11/18 (最終更新日: 2024/05/19)

【Splide】画面内に入ったらスライダーを自動再生させる

こんにちは、トシキです。
今回は、画面内にスライダーが表示されたら自動再生させる方法について解説します。
スライダーライブラリのSplideを使用します。

本記事の内容

通常の自動再生スライダー
カスタマイズ後のスライダー
まとめ

スポンサードサーチ

通常の自動再生スライダー

まずは通常の自動再生スライダーになります（フェードアニメーションで表示が切り替わります）。
３秒ほど待ってからスクロールしてみてください。
サンプルのスライダー枚数は全部で５枚になりますが、スクロールしたらおそらく２枚目以降が表示されているかと思います。

See the Pen 【Splide】画面内に入ったらスライダーを自動再生させる① by tosshii (@totototosshii) on CodePen.

Splideを読み込みます。
headタグにCSS、body閉じタグ直前にJavaScriptのCDNを記述します↓


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">


<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>

HTML

<div class="spacer">スクロールしてください↓</div>

<div class="splide" aria-label="自動で切り替わるスライダー">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">１</li>
      <li class="splide__slide">２</li>
      <li class="splide__slide">３</li>
      <li class="splide__slide">４</li>
      <li class="splide__slide">５</li>
    </ul>
  </div>
</div>

<div class="spacer"></div>

CSS

// SCSS
.spacer{
  height: 1000px;
  text-align: center;
  font-size: 32px;
}

.splide__slide{
  display: grid;
  place-content: center;
  height: 200px;
  color: #FAFAFA;
  font-weight: 700;
  font-size: 32px;
  &:first-of-type{
    background-color: #6938C9;
  }
  &:nth-of-type(2){
    background-color: #71A9FB;
  }
  &:nth-of-type(3){
    background-color: #85E695;
  }
  &:nth-of-type(4){
    background-color: #CFCC36;
  }
  &:nth-of-type(5){
    background-color: #FFC347;
  }
}

spacerはスクロールさせるために高さを付けたダミーです。

JavaScript

window.addEventListener('DOMContentLoaded', () => {
  new Splide('.splide', {
    arrows: false,// 左右の矢印ボタンは無し
    pauseOnHover: false,// ホバーしても自動再生は停止させない
    autoplay: true,// 自動再生
    interval: 3000,// 3秒間隔で切り替える
    type: 'fade',// スライダーの種類はフェード
    rewind: true,// スライダーの最後まで行ったら先頭に巻き戻す
  }).mount();
});

フェードアニメーションでループさせる場合は、type: 'fade'に加えて、rewind: trueも指定してください。

カスタマイズ後のスライダー

先ほどと同じく、３秒ほど待ってからスクロールしてみてください。
画面内に入った時は１枚目が表示されているはずです。

See the Pen 【Splide】画面内に入ったらスライダーを自動再生させる② by tosshii (@totototosshii) on CodePen.

HTML、CSSは同じです。
IntersectionエクステンションをCDNで追加します。
body閉じタグ直前のsplide.min.jsの後に読み込んでください。


<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-intersection@0.2.0/dist/js/splide-extension-intersection.min.js"></script>

JavaScript

window.addEventListener('DOMContentLoaded', () => {
  new Splide('.splide', {
    arrows: false,
    pauseOnHover: false,
    // trueから'pause'に変更↓
    autoplay: 'pause',
    interval: 3000,
    type: 'fade',
    rewind: true,
    // 追加↓
    intersection: {
      inView: {
        autoplay: true,
      }
    },            // 追加↓
  }).mount(window.splide.Extensions);
});

autoplay: trueをautoplay: 'pause'に変更
※pauseはクォーテーション「''」で囲んでください。
intersectionオプションを追加
mount後ろの丸括弧に、window.splide.Extensionsを追加

inViewは、スライダーが画面内に入った時に指定するオプションです。
自動再生させたいので、inView内のオプションにはautoplay: trueを指定してください。

この設定により、画面内にスライダーが入ると再生が始まります。しかし、その後、画面外にスクロールして再び戻ってきても、再生は続いたままになります。
もし画面外へスクロールしてから、再び画面内に戻ってくるまでの間も再生を停止したい場合は、outViewオプションも追加する必要があります。

window.addEventListener('DOMContentLoaded', () => {
  new Splide('.splide', {
    arrows: false,
    pauseOnHover: false,
    autoplay: 'pause',
    interval: 3000,
    type: 'fade',
    rewind: true,
    intersection: {
      inView: {
        autoplay: true,
      },
      // 追加↓
      outView: {
        autoplay: false,
      },
    },
  }).mount(window.splide.Extensions);
});

outViewはスライダーが画面外に出た時に適用されるオプションです。
その間の自動再生は停止させたいので、autoplay: falseを指定しています。

そしてこちらが適用された状態です。
画面外に出て再び画面内に戻ったら、画面外に出る直前のスライドから再生されます。

See the Pen 【Splide】画面内に入ったらスライダーを自動再生させる③ by tosshii (@totototosshii) on CodePen.

スポンサードサーチ