Auto Scroll

Overview

The Auto Scroll extension continuously scrolls the carousel. 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 carousel 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. From 0.5.0, you can scroll the carousel in the opposite direction by setting a negative value.

autoStart

Determines whether to start scrolling the carousel after initialization.

rewind

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

pauseOnHover

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

pauseOnFocus

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

Methods

play()

Starts scrolling the carousel.

pause()

Pauses auto scroll.

isPaused()

Checks if auto scroll is paused or not.

Return