Intersection

Overview

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.

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.


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 for more details.


rootMargin

rootMargin: string

Margin around the root element. See 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 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.

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.

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

intersection:out

Fired whenever the slider exits the viewport.

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