Auto Scroll

Overview

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

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

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

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

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

After importing files, mount the extension to Splide:

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

Options

This extension takes several options as autoScroll:

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

speed

speed: number = 1

The scroll speed as pixel/frame. From 0.5.0, you can scroll the carousel in the opposite direction by setting a negative value.

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

autoStart

autoStart: boolean = true

Determines whether to start scrolling the carousel after initialization.


rewind

rewind: boolean

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


pauseOnHover

pauseOnHover: boolean = true

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


pauseOnFocus

pauseOnFocus: boolean = true

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

Methods

play()

play(): void

Starts scrolling the carousel.


pause()

pause(): void

Pauses auto scroll.


isPaused()

isPaused(): boolean

Checks if auto scroll is paused or not.

Return

true if auto scroll is paused, or otherwise false.