Written by Toshiki

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

JavaScript Web制作

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

本記事の内容

スポンサードサーチ

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

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

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">1</li>
      <li class="splide__slide">2</li>
      <li class="splide__slide">3</li>
      <li class="splide__slide">4</li>
      <li class="splide__slide">5</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も指定してください。

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

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

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: trueautoplay: '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.

スポンサードサーチ

まとめ

画面内に入ったらスライダーを自動再生させる方法について解説しました。
Splideの自動再生設定に加えて、Intersectionエクステンションを読み込み、そのオプションを追加することで、画面外や画面内での自動再生をより細かく制御することができます。
今回の解説は以上です。

この記事が役に立ったら、応援してくれると嬉しいです! 投げ銭で応援する
 

人気記事Webサイトにフォントサイズ変更ボタンを実装する方法(jQuery使用)

人気記事【脱jQuery】スクロールしたら画面上部に追従メニューを表示する方法