fullPage.jsで縦のセクションを自動再生する方法

fullPage.jsでは、**セクションを自動的に再生**することができます。これにより、カルーセルが自動的に再生され、**X秒ごとに次のセクションに移動**します。まるで**自動**スライダーやカルーセルのようです。

これはfullPage.jsに標準で備わっている機能ではありませんが、fullPage.jsの[メソッド](/fullPage/docs/#methods)や[コールバック](/fullPage/docs/#callbacks)を使用することで実現可能です。fullPage.jsはそれに対応しています！

もちろん、[fullPage.jsで水平スライドを自動再生する方法](/fullPage/help/how-to-autoplay-horizontal-slides-in-fullpage-js/)もありますので、興味があればこちらもチェックしてください。

説明を始める前に、[こちらのコードペン](https://codepen.io/alvarotrigo/pen/wvgxrqg)が千の言葉に勝るので、コピーして貼り付けて使える例を示します。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="wvgxrqg" data-pen-title="fullPage.js - Autoplay Vertical 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>このPenを参照してください：<a href="https://codepen.io/alvarotrigo/pen/wvgxrqg"> fullPage.js - Autoplay Vertical 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>

動作は非常に簡単です。基本的に、新しいセクションに到達するたびに1秒（1000ミリ秒）待機し、その後次のセクションにスクロールダウンします。そして、セクションが残っていない場合は最初のセクションに戻り、**無限ループ**が作成されます。

では、どうやって実現するのでしょうか？これも簡単です。`afterLoad`コールバックを使用して新しいセクションに到達したことを検出し、JavaScriptの`setTimeout`関数を使用して1000ミリ秒の遅延を追加します。その後、`fullpage_api.moveSectionDown();`メソッドを使用して次のセクションに移動します。コードは以下のようになります：

```js
afterLoad: function (origin, destination, direction) {
 
    // 1000ミリ秒の遅延
    const lapse = 1000;
    
    g_interval = setInterval(function () {
      fullpage_api.moveSectionDown();
    }, lapse);
  
  }
 ```

`g_interval`という変数にインターバルIDを保存しています。この目的は、ユーザーがスクロールアップまたはダウンして他のセクションに移動したときに、遅延（この場合1秒）がリセットされ、再び0から始まるようにするためです。

これを実現するために、現在のセクションを離れるときに`onLeave`コールバックを使ってインターバルをクリアします。

```js
onLeave: function(origin, destination, direction){
    clearInterval(g_interval);
  },
``` 

最後に、`continuousVertical: true`というfullPage.jsのオプションを使用して、最後のセクションに到達したときに最初のセクションに戻るように設定します。これにより、無限ループが作成されます。

以下が全体のコードです：

```js
var g_interval;
new fullpage('#fullpage', {
  licenseKey: 'YOUR KEY HERE',
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
  continuousVertical: true,
  onLeave: function(origin, destination, direction){
    clearInterval(g_interval);
  },
  afterLoad: function (origin, destination, direction) {
 
    // 1000ミリ秒の遅延
    const lapse = 1000;
    
    g_interval = setInterval(function () {
      fullpage_api.moveSectionDown();
    }, lapse);
    
  }
});
```

## ユーザーのスクロールを無効にする

スライダーがユーザーの操作を受け付けず、スクロールし続けるようにしたい場合、fullPage.jsの初期化後に`fullpage_api.setAllowScrolling(false);`メソッドを呼び出します。

```js
new fullpage(.......)
  fullpage_api.setAllowScrolling(false);
```

[こちらのコードペン](https://codepen.io/alvarotrigo/pen/PoWBJeb)も参考になります：

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="PoWBJeb" data-pen-title="fullPage.js - Autoplay Vertical Slides disabling user scroll" 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>このPenを参照してください：<a href="https://codepen.io/alvarotrigo/pen/PoWBJeb"> fullPage.js - Autoplay Vertical Slides disabling user scroll</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>