Intersection

Overview

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

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

The extension also emits some events so that you can control the carousel 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 carousel 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 carousel 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 carousel 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 carousel 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 carousel gets visible in the viewport.

Events

`intersection`

Fired whenever the carousel 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 carousel 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 carousel 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 );
} );