0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2024-12-13

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

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

もちろん、fullPage.jsで水平スライドを自動再生する方法もありますので、興味があればこちらもチェックしてください。

説明を始める前に、こちらのコードペンが千の言葉に勝るので、コピーして貼り付けて使える例を示します。

このPenを参照してください: fullPage.js - Autoplay Vertical Slides by Álvaro (@alvarotrigo) on CodePen

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

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

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

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

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

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

最後に、continuousVertical: trueというfullPage.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);メソッドを呼び出します。

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

こちらのコードペンも参考になります:

このPenを参照してください: fullPage.js - Autoplay Vertical Slides disabling user scroll by Álvaro (@alvarotrigo) on CodePen

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?