Auto Scroll

Overview

The Auto Scroll extension continuously scrolls the slider. This goes well with "Drag Free" mode.

This extension is compatible with the Intersection extension that allows you to start auto scroll only when the slider is in the viewport.

Installation

NPM

Get the latest version by NPM:

$ npm install @splidejs/splide-extension-auto-scroll

$ npm install @splidejs/splide-extension-auto-scroll

Then, mount the extension to Splide:

import { Splide } from '@splidejs/splide';
import { AutoScroll } from '@splidejs/splide-extension-auto-scroll';

new Splide( '.splide' ).mount( { AutoScroll } );
JavaScript

import { Splide } from '@splidejs/splide';
import { AutoScroll } from '@splidejs/splide-extension-auto-scroll';


new Splide( '.splide' ).mount( { AutoScroll } );

CDN or Hosting Files

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

<script src="path-to-the-script/splide-extension-auto-scroll.min.js"></script>
HTML

<script src="path-to-the-script/splide-extension-auto-scroll.min.js"></script>

After importing files, mount the extension to Splide:

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

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

Options

This extension takes several options as autoScroll:

new Splide( '.splide', {
  autoScroll: {
    speed: 2,
  },
} );
JavaScript

new Splide( '.splide', {
  autoScroll: {
    speed: 2,
  },
} );

speed

The scroll speed as pixel/frame.

autoStart

Determines whether to start scrolling the slider after initialization.

rewind

Determines whether to rewind the slider when it reaches the end.

pauseOnHover

Determines whether to pause the auto scroll when the cursor is on the slider.

pauseOnFocus

Determines whether to pause the auto scroll when the slider contains an active element.

Methods

play()

Starts scrolling the slider.

pause()

Pauses auto scroll.