autoplay

Auto-advances slides on a timer. Pauses on hover, focus, and optionally on visibility change.

Import

import { autoplay } from '@andresclua/sliderkit-plugins'

Usage

new Slider('#el', {
  loop: true,
  plugins: [
    autoplay({
      delay: 3000,
      pauseOnHover: true,
      pauseOnFocus: true,
      stopOnLastSlide: false,
      resetOnVisibility: true,
    }),
  ],
})

Options

Option	Type	Default	Description
delay	number	3000	Time in ms between slide advances.
pauseOnHover	boolean	true	Pause when the mouse is over the slider.
pauseOnFocus	boolean	true	Pause when a focusable element inside has keyboard focus.
stopOnLastSlide	boolean	false	Stop permanently when the last slide is reached.
resetOnVisibility	boolean	true	Reset timer when the tab becomes visible again (Page Visibility API).
reverseDirection	boolean	false	Auto-advance backwards.

Control via slider instance

const slider = new Slider('#el', { plugins: [autoplay()] })

slider.play()   // start autoplay
slider.pause()  // pause autoplay

Demo

View autoplay demo →