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

## はじめに & 初期デモ

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

説明を飛ばして例をすぐに見たい方はこちらのコードペンをご覧ください：  
[こちらのコードペン](https://codepen.io/alvarotrigo/pen/JjEKXav)でデモを確認できます。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="JjEKXav" data-pen-title="fullPage.js - Autoplay Horizontal Slides" data-user="alvarotrigo" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/alvarotrigo/pen/JjEKXav">
  fullPage.js - Autoplay Horizontal Slides</a> by Álvaro (<a href="https://codepen.io/alvarotrigo">@alvarotrigo</a>) on <a href="https://codepen.io">CodePen</a>.</span></p>
  <script async src="https://public.codepenassets.com/embed/index.js"></script>

## チュートリアル

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

### a) `afterLoad` コールバック

ここでは、`afterLoad`コールバックを使用します。このコールバックに記述した内容は、**垂直セクション間を移動するたびに実行されます**。詳細は[fullPage.jsドキュメント](https://alvarotrigo.com/fullPage/docs/ja/#afterload-origin-destination-direction-trigger)に記載されています。

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

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

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

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

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

### b) `moveSlideRight` メソッド

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

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

### c) 初期コード

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

```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コードです：

```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コードです：

```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;
    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);
    }
  }
});
```

## 最終デモ

[こちらのコードペン](https://codepen.io/alvarotrigo/pen/oNBLxrJ)で最終的なデモを見ることができます：

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="oNBLxrJ" data-pen-title="fullPage.js - Autoplay Some Horizontal Slides" data-user="alvarotrigo" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/alvarotrigo/pen/oNBLxrJ">
  fullPage.js - Autoplay Some Horizontal Slides</a> by Álvaro (<a href="https://codepen.io/alvarotrigo">@alvarotrigo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span></p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>