Zenn
↔️

fullPage.jsで水平スライドを自動再生する方法

2025/01/03に公開
HTML
JavaScript
frontend
slider
fullpage
tech

はじめに & 初期デモ

この記事では、ページ上の1つまたは複数の水平スライダーを自動でアニメーションさせる設定を、fullPage.jsでどのように行うかを解説します。

説明を飛ばして例をすぐに見たい方はこちらのコードペンをご覧ください：
こちらのコードペンでデモを確認できます。

チュートリアル

デモの動作を理解したい方のために説明を始めます。

a) afterLoad コールバック

ここでは、afterLoadコールバックを使用します。このコールバックに記述した内容は、垂直セクション間を移動するたびに実行されます。詳細はfullPage.jsドキュメントに記載されています。

以下がその基本構文です：

// 垂直セクションが変わるたびに実行される
afterLoad: function (origin, destination, direction) {
    // 任意のコード
}

afterLoadを使う理由は、afterSlideLoadがセクションの最初のスライドでは実行されないためです。垂直セクションが切り替わるたびに、そのセクションに水平スライダーが含まれているかを確認し、含まれていれば1秒ごとにコードを実行するインターバルを設定します。

インターバルは、指定したミリ秒ごとに内部のコードを繰り返し実行します。以下はその例です：

// 1000ミリ秒ごとに実行
setInterval(function () {
    console.log("hello");
}, 1000);

b) moveSlideRight メソッド

1秒ごとに何を実行するのでしょうか？今回は、スライダーを右に移動させるためにfullpage_api.moveSlideRightメソッドを呼び出します。このメソッドは名前の通り、スライダーを右に移動させるものです（例：スライド1からスライド2へ）。

ただし、このインターバルは止まらず、スライダーを含むセクションごとに新しいインターバルが生成されます。この問題を解決するために、変数g_intervalにインターバルの参照を保存し、垂直セクションごとにこれをクリアします。このようにして、必要に応じて常に新しいインターバルを開始します。

c) 初期コード

これらを組み合わせて、fullPage.jsの初期化に統合します：

var g_interval;
new fullpage('#fullpage', {
  licenseKey: 'YOUR KEY HERE',
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],  
  afterLoad: function (origin, destination, direction) {
    clearInterval(g_interval);
    
    // 1000ミリ秒の間隔
    const lapse = 1000;
    
    if(destination.item.querySelectorAll('.fp-slides').length){
      g_interval = setInterval(function () {
        fullpage_api.moveSlideRight();
      }, lapse);
    }
  }
});

このコードにより、ページ上のすべての水平スライダーが自動再生されます。

しかし、一部のスライダーだけを自動再生したい場合はどうすれば良いでしょうか？

d) 一部のスライダーだけを自動再生

この場合、どのスライダーを自動再生するかを指定する必要があります。そのために、HTMLマークアップを利用して簡潔に処理します。

自動再生したい水平スライダーが含まれるセクションにdata-auto属性を追加します。この属性の内容はチェックしないため、任意の値を使用できますが、一般的にはdata-auto="true"のようなブール値を使うのが良いでしょう。

この属性を持つセクションだけで自動アニメーションを開始するようにします。

以下がHTMLコードです：

<div id="fullpage">
  <div class="section">
    <div class="slide" data-anchor="slide1">Slide 1.1</div>
    <div class="slide" data-anchor="slide2">Slide 1.2</div>
    <div class="slide" data-anchor="slide3">Slide 1.3</div>
  </div>
  <div class="section" data-auto="true">
    <div class="slide" data-anchor="slide1">Slide 2.1</div>
    <div class="slide" data-anchor="slide2">Slide 2.2</div>
    <div class="slide" data-anchor="slide3">Slide 2.3</div>
  </div>
  <div class="section">Section 3</div>
  <div class="section">
    <div class="slide" data-anchor="slide1">Slide 4.1</div>
    <div class="slide" data-anchor="slide2">Slide 4.2</div>
    <div class="slide" data-anchor="slide3">Slide 4.3</div>
  </div>
</div>

そしてこちらがJavaScriptコードです：

var g_interval;

new fullpage('#fullpage', {
  licenseKey: 'YOUR KEY HERE',
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],  
  afterLoad: function (origin, destination, direction) {
    clearInterval(g_interval);
    
    // 1000ミリ秒の間隔
    const lapse = 1000;
    const shouldAutoPlay = destination.item.hasAttribute('data-auto');

    const hasSlides = destination.item.querySelectorAll('.fp-slides').length;
    
    if(shouldAutoPlay && hasSlides){
      g_interval = setInterval(function () {
        fullpage_api.moveSlideRight();
      }, lapse);
    }
  }
});

最終デモ

こちらのコードペンで最終的なデモを見ることができます：

Discussion