Intersection

You're browsing the documentation for v3

Overview

The Intersection extension observes the intersection of the slider with the viewport and controls Autoplay, Keyboard, AutoScroll and Video features.

The following slider starts/pauses autoplay when it enters/exits the viewport.

The extension also emits some events so that you can control the slider when the intersection changes.

This extension does not support IE since it uses Intersection Observer. Install a polyfill if you need to support it.

Installation

NPM

Get the latest version by NPM:

$ npm install @splidejs/splide-extension-intersection

$ npm install @splidejs/splide-extension-intersection

Mount the extension to Splide:

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 or Hosting Files

Visit jsDelivr and get the link of the latest file or download the file from the dist directory. And then, import the minified script on your site:

<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>

After that, mount the extension to Splide:

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

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

Usage

Pass the intersection option to the constructor and define the inView option. The following example starts autoplay when the slider enters the viewport.

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

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

If you want to pause autoplay after the slider exits the viewport, provide the outView option.

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

Options

`inView`

inView: IntersectionViewOptions

A collection of options that are applied when the slider enters or is in the viewport.

`autoplay`	`boolean`	Starts or pauses autoplay.
`keyboard`	`boolean`	Enables or disables keyboard shortcuts.
`autoScroll`	`boolean`	Starts or pauses auto scroll.
`video`	`boolean`	Plays or pauses the active video.

`outView`

outView: IntersectionViewOptions

A collection of options that are applied when the slider exits the viewport. This takes same properties with the inView option above.

`root`

root: Element | Document | null

The element that is used as a viewport. See this document for more details.

`rootMargin`

rootMargin: string

Margin around the root element. See this document for more details.

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 }

A threshold or an array with thresholds for percentage when the IntersectionObserver callback is executed. See this document for more details.

`once`

once: boolean

If true, the extension quits observing the intersection once the slider gets visible in the viewport.

Events

`intersection`

Fired whenever the slider crosses the threshold.

`entry`	`IntersectionObserverEntry`	Visit here

splide.on( 'intersection', function ( entry ) {
  if ( entry.isIntersecting ) {
    if ( entry.intersectionRatio >= 0.5 ) {
      // do something
    }
  }
} );
JavaScript

splide.on( 'intersection', function ( entry ) {
  if ( entry.isIntersecting ) {
    if ( entry.intersectionRatio >= 0.5 ) {
      // do something
    }
  }
} );

`intersection:in`

Fired whenever the slider crosses the threshold and it intersects the viewport.

`entry`	`IntersectionObserverEntry`	Visit here

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`

Fired whenever the slider exits the viewport.

`entry`	`IntersectionObserverEntry`	Visit here

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

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