Intersection

インターセクション

概要

Intersectionエクステンションは、ブラウザの画面に対するスライダーの出入りを監視し、自動再生、キーボードショートカット、自動スクロール、動画などを状況に応じて制御するための拡張機能です。

たとえば下のスライダーは、画面内にあるときのみ自動再生が有効になり、画面外に出ると再生を停止します。

また、イベントを利用して独自の制御を追加できます。

このエクステンションはIntersection Observerを利用しているため、IEをサポートしていません。IEで動作させるにはポリフィルを導入してください。

インストール

NPM

最新版をNPMから取得してください。

$ npm install @splidejs/splide-extension-intersection

$ npm install @splidejs/splide-extension-intersection

Splideを初期化する際、Intersectionエクステンションをmount()メソッドに渡すと使用可能になります。

import { Splide } from '@splidejs/splide';
import { Intersection } from '@splidejs/splide-extension-intersection';

new Splide( '#splide' ).mount( { Intersection } );
JavaScript

import { Splide } from '@splidejs/splide';
import { Intersection } from '@splidejs/splide-extension-intersection';


new Splide( '#splide' ).mount( { Intersection } );

CDNまたはホスティング

jsDelivrから最新ファイルへのURLを取得するか、あるいはこのディレクトリからファイルをダウンロードし、<script>タグを用いてサイトにインポートしてください。

<script src="path-to-the-script/splide-extension-intersection.min.js"></script>
HTML

<script src="path-to-the-script/splide-extension-intersection.min.js"></script>

Splideを初期化する際、window.splide.Extensionsを渡せば準備完了です。

new Splide( '#splide' ).mount( window.splide.Extensions );
JavaScript

new Splide( '#splide' ).mount( window.splide.Extensions );

使用方法

Splideのコンストラクタを利用して、intersection.inViewオプションを設定してください。たとえば以下のようにすると、スライダーが画面内に入ったときに自動再生が始まります。

new Splide( '#splide', {
  autoplay: 'pause',
  intersection: {
    inView: {
      autoplay: true,
    },
  },
} );
JavaScript

new Splide( '#splide', {
  autoplay: 'pause',
  intersection: {
    inView: {
      autoplay: true,
    },
  },
} );

もしスライダーが画面外に出た際に自動再生を停止するには、outViewオプションを設定します。

new Splide( '#splide', {
  autoplay: 'pause',
  intersection: {
    inView: {
      autoplay: true,
    },
    outView: {
      autoplay: false,
    },
  },
} );
JavaScript

new Splide( '#splide', {
  autoplay: 'pause',
  intersection: {
    inView: {
      autoplay: true,
    },
    outView: {
      autoplay: false,
    },
  },
} );

オプション

`inView`

inView: IntersectionViewOptions

スライダーが画面内に入ったときに適用されるオプションです。

`autoplay`	`boolean`	自動再生の開始・停止を切り替える
`keyboard`	`boolean`	キーボードショートカットの有効・無効を切り替える
`autoScroll`	`boolean`	自動スクロールの開始・停止を切り替える
`video`	`boolean`	動画の再生・停止を切り替える

`outView`

outView: IntersectionViewOptions

スライダーが画面外に出たときに適用されるオプションです。inViewオプションと同様のプロパティを取ります。

`root`

root: Element | Document | null

ビューポートとして使用される要素を指定します。詳しくはこのページを参照してください。

`rootMargin`

rootMargin: string

ルート要素に適用するマージンを指定します。詳しくはこのページを参照してください。

new Splide( '#splide', {
  intersection: {
    rootMargin: '200px',
    inView: {
      keyboard: true,
    },
    outView: {
      keyboard: false,
    },
  },
} );
JavaScript

new Splide( '#splide', {
  intersection: {
    rootMargin: '200px',
    inView: {
      keyboard: true,
    },
    outView: {
      keyboard: false,
    },
  },
} );

`threshold`

gap: { row?: number | string, col?: number | string }

IntersectionObserverのコールバックを実行するための閾値を、数値または配列で指定します。詳しくはこのページを参照してください。

`once`

once: boolean

trueに設定すると、スライダーが一度画面内に入るとすぐにIntersection Observerによる監視を停止します。以後、スライダーの更新やイベントの発生は行われません。

イベント

`intersection`

スライダーの位置が閾値を超えた際に発生します。

`entry`	`IntersectionObserverEntry`	このページを参照

splide.on( 'intersection', function ( entry ) {
  if ( entry.isIntersecting ) {
    if ( entry.intersectionRatio >= 0.5 ) {
      // 何かの処理
    }
  }
} );
JavaScript

splide.on( 'intersection', function ( entry ) {
  if ( entry.isIntersecting ) {
    if ( entry.intersectionRatio >= 0.5 ) {
      // 何かの処理
    }
  }
} );

`intersection:in`

スライダーの位置が閾値を超え、かつスライダーがビューポート内にある場合に発生します。

`entry`	`IntersectionObserverEntry`	このページを参照

splide.on( 'intersection:in', function ( entry ) {
  console.log( 'in', entry.target );
} );
JavaScript

splide.on( 'intersection:in', function ( entry ) {
  console.log( 'in', entry.target );
} );

`intersection:out`

スライダーがビューポート外に出た際に発生します。

`entry`	`IntersectionObserverEntry`	このページを参照

splide.on( 'intersection:out', function ( entry ) {
  console.log( 'out', entry.target );
} );
JavaScript

splide.on( 'intersection:out', function ( entry ) {
  console.log( 'out', entry.target );
} );