Intersection

インターセクション

概要

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

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

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

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

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

インストール

NPM

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

$ 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

CDNまたはホスティング

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

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

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

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

使用方法

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

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

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

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

オプション

inView

inView: IntersectionViewOptions

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

autoplayboolean

自動再生の開始・停止を切り替える

keyboardboolean

キーボードショートカットの有効・無効を切り替える

autoScrollboolean

自動スクロールの開始・停止を切り替える

videoboolean

動画の再生・停止を切り替える


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

threshold

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

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


once

once: boolean

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

イベント

intersection

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

entryIntersectionObserverEntry

このページを参照

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

intersection:in

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

entryIntersectionObserverEntry

このページを参照

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

intersection:out

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

entryIntersectionObserverEntry

このページを参照

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