English

Extension

エクステンション（拡張機能）

v3用のドキュメントを参照しています

エクステンション

Splideは、ある特定の機能に特化した、いくつかの小さなコンポーネントから成り立っています。このコンポーネントはエクステンションとして、スライダーの機能を拡充するためにあとから追加できるようになっています。

コンポーネントの作成

一つひとつのコンポーネントは単なる関数で、オブジェクトを返すことでパブリックなメソッドやプロパティを定義します。

export function MyExtension( Splide, Components, options ) {
  /**
   * 省略可能。コンポーネントがマウントされた際に呼び出される
   */
  function mount() {
    console.log( 'Hello, Splide!' );
  }


  /**
   * 省略可能。スライダーが破棄された際に呼び出される
   */
  function destroy() {
    console.log( 'Bye!' );
  }


  return {
    mount,
    destroy,
  };
}
JavaScript

このコンストラクタは、次の3つの引数をとります。

SplideSplide

Splideのインスタンス

ComponentsComponents

全てのコンポーネントが入ったオブジェクト

optionsOptions

オプションが入ったオブジェクト

これらの引数を通して、Splideあるいはコンポーネントのプロパティやメソッドを使用できます。

export function MyExtension( Splide, Components, options ) {
  function mount() {
    // 現在のインデックスを表示
    console.log( Splide.index );


    // Slideサブコンポーネントをすべて表示
    console.log( Components.Slides.get() );
  }


  return {
    mount,
  };
}
JavaScript

ただし「疎結合」の観点から、エクステンションについては他のエクステンションのプロパティを参照しないようにすることをおすすめします。そうしないと、エクステンションの取り外しが容易ではなくなります。

登録

作成したエクステンションは、Splide#mount()メソッドを用いて登録すると使えるようになります。

import Splide from '@splidejs/splide';
import { MyExtension01 } from '...';
import { MyExtension02 } from '...';


new Splide( '#splide' ).mount( {
  MyExtention01,
  MyExtension02,
} );
JavaScript

コンポーネントの名前は、すべてのコンポーネント間で異なっている必要があります。登録する際は、Splideが使用しているコアコンポーネントの名前と一致しないよう注意してください。

イベントの利用

コンポーネント内でイベントを利用する最も簡単な方法は、Splide#on()を使用することです。ただし、Splide#off()により、外部から削除可能なことに注意してください。

export function MyExtension( Splide, Components, options ) {
  function mount() {
    Splide.on( 'resize', onResize );
  }


  function onResize() {
    // 何かの処理
  }


  return {
    mount,
  };
}
JavaScript

もう一つは、EventInterface()コンストラクタを利用する方法です。このコンストラクタが提供するon()メソッドで登録したハンドラは、同じく与えられるoff()でのみ削除できます。

また、このコンストラクタはネイティブのイベントを使用するためのbind()およびunbind()という2つのユーティリティ関数もあわせて提供します。

import { EventInterface } from '@splidejs/splide';


export function MyExtension( Splide, Components, options ) {
  const { on, off, bind, unbind } = EventInterface( Splide );


  function mount() {
    // Splide内部のイベントを利用
    on( 'resize', () => {} );


    // 登録されたハンドラを削除
    off( 'resize' );


    // ネイティブのイベントを利用
    bind( window, 'resize', () => {} );


    // 登録したハンドラを削除
    unbind( window, 'resize' );
  }


  ...
}
JavaScript

なお、Splide#destroy()あるいはdestroyオプションによりインスタンスが破棄された瞬間、すべてのイベントハンドラが削除されます。mount()メソッドは再度インスタンスがマウントされる際に再び呼ばれますので、イベントハンドラの登録はこの関数内で行うと安全です。

サンプル

それでは、全体のスライド数と現在のスライド番号を「番号/全体」の形式で表示するサンプルを見てみましょう👀

エレメントの生成

まず、番号を表示するためのエレメントを作成し、トラック要素の隣に配置します。

export function SlideNumber( Splide, Components ) {
  // Elementsコンポーネントからトラック要素を取得
  const { track } = Components.Elements;


  let elm;


  function mount() {
    elm = document.createElement( 'div' );
    elm.style.textAlign = 'center';
    elm.style.marginTop = '0.5em';


    // 生成した要素をトラックの隣に挿入
    track.parentElement.insertBefore( elm, track.nextSibling );
  }


  return {
    mount,
  };
}
JavaScript

ElementsコンポーネントはHTMLで与えられた、スライダーを構成するすべての要素を保持しています。

初期化と番号の更新

現在のスライドインデックスはSplide#indexから、全体のスライド数はSplide#lengthからそれぞれ取得できます。また、番号はスライダーが動いたタイミングで更新されますので、moveイベントを利用すれば更新処理を書けそうです。

export function SlideNumber( Splide, Components ) {
  const { track } = Components.Elements;


  let elm;


  function mount() {
    elm = document.createElement( 'div' );
    elm.style.textAlign = 'center';
    elm.style.marginTop = '0.5em';


    track.parentElement.insertBefore( elm, track.nextSibling );


    update();
    Splide.on( 'move', update );
  }


  function update() {
    elm.textContent = `${ Splide.index + 1 }/${ Splide.length }`;
  }


  return {
    mount,
  };
}
JavaScript

できました！ 🎉 成果物は、下のスライダーで確認できます。

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09