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.

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

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

Mount the extension to Splide:

import { Splide } from '@splidejs/splide';
import { Intersection } from '@splidejs/splide-extension-intersection';
new Splide( '#splide' ).mount( { Intersection } );
JavaScript

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

After that, mount the extension to Splide:

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

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

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

Options

inView

inView: IntersectionViewOptions

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

autoplayboolean

Starts or pauses autoplay.

keyboardboolean

Enables or disables keyboard shortcuts.

autoScrollboolean

Starts or pauses auto scroll.

videoboolean

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

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.

entryIntersectionObserverEntry

Visit here

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

intersection:in

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

entryIntersectionObserverEntry

Visit here

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

intersection:out

Fired whenever the carousel exits the viewport.

entryIntersectionObserverEntry

Visit here

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