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 2025-01-03

はじめに & 初期デモ

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

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

See the Pen fullPage.js - Autoplay Horizontal Slides by Álvaro (@alvarotrigo) on CodePen.

チュートリアル

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

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

最終デモ

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

See the Pen fullPage.js - Autoplay Some Horizontal Slides 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?