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.

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

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 slider enters the viewport.

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

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

Options

inView

inView: IntersectionViewOptions

A collection of options that are applied when the slider 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 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

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.

entryIntersectionObserverEntry

Visit here

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

intersection:in

Fired whenever the slider 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 slider exits the viewport.

entryIntersectionObserverEntry

Visit here

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