Configuration

All options can be passed as the second argument to ContinuousCarousel():

const carousel = ContinuousCarousel('myCarousel', {
  direction: 'horizontal',
  numVisible: 2,
  interval: 3000,
  pauseOnHover: true
});

Quick Reference

Option	Type	Default	Description
direction	string	'horizontal'	Scroll direction
numVisible	number	1	Items visible at once
interval	number	2000	Time between transitions (ms)
transitionDuration	number	1000	Transition animation length (ms)
pauseOnHover	boolean	false	Pause on mouse hover
pauseOnFocus	boolean	false	Pause on element focus
autoplay	boolean	true	Start automatically
observeVisibility	boolean	true	Pause when off-screen
observeResize	boolean	true	Recalculate on resize
keyboardNav	boolean	true	Enable keyboard navigation
announceSlides	boolean	true	Announce slides for screen readers
onSlideChange	function	null	Fired on slide change
onPause	function	null	Fired when paused
onPlay	function	null	Fired when played
onDestroy	function	null	Fired when destroyed

---

Core Options

direction

• Type: 'horizontal' | 'vertical'
• Default: 'horizontal'

Scroll direction of the carousel. Also set via the data-direction HTML attribute.

ContinuousCarousel('myCarousel', {
  direction: 'vertical'
});

• 1
• 2
• 3
• 4
• 5
• 6

numVisible

• Type: number
• Default: 1

Number of items visible at once. Also set via the data-num-visible HTML attribute. Must be less than the total number of items.

ContinuousCarousel('myCarousel', {
  numVisible: 3
});

• 1
• 2
• 3
• 4
• 5
• 6

Timing Options

interval

• Type: number (milliseconds)
• Default: 2000

Time between transitions. Lower values = faster scrolling.

ContinuousCarousel('myCarousel', {
  interval: 4000 // 4 seconds between slides
});

transitionDuration

• Type: number (milliseconds)
• Default: 1000

Duration of the slide transition animation. Should be less than interval.

ContinuousCarousel('myCarousel', {
  transitionDuration: 500 // Fast transition
});

Feature Options

pauseOnHover

• Type: boolean
• Default: false

Pause the carousel when the mouse hovers over it. Resumes when the mouse leaves.

ContinuousCarousel('myCarousel', {
  pauseOnHover: true
});

• 1
• 2
• 3
• 4
• 5
• 6

TIP

Hover over the carousel above to see it pause.

pauseOnFocus

• Type: boolean
• Default: false

Pause the carousel when any element inside it receives keyboard focus.

ContinuousCarousel('myCarousel', {
  pauseOnFocus: true
});

autoplay

• Type: boolean
• Default: true

Whether the carousel starts automatically. Set to false to start paused and control playback via the API.

const carousel = ContinuousCarousel('myCarousel', {
  autoplay: false
});

// Start manually later
carousel.play();

observeVisibility

• Type: boolean
• Default: true

Uses IntersectionObserver to automatically pause the carousel when it's scrolled off-screen. Saves battery and CPU on mobile devices.

ContinuousCarousel('myCarousel', {
  observeVisibility: false // Disable auto-pause
});

observeResize

• Type: boolean
• Default: true

Uses ResizeObserver to recalculate carousel dimensions when the container is resized. Ensures the carousel stays responsive.

ContinuousCarousel('myCarousel', {
  observeResize: false // Disable resize handling
});

keyboardNav

• Type: boolean
• Default: true

Enables keyboard navigation. When the carousel has focus:

• Arrow Right / Down — advance forward
• Arrow Left / Up — advance backward
• Space / Enter — toggle pause/play

Sets tabindex="0", role="region", and aria-roledescription="carousel" on the container.

ContinuousCarousel('myCarousel', {
  keyboardNav: false // Disable keyboard navigation
});

announceSlides

• Type: boolean
• Default: true

Enables ARIA live region announcements for screen readers when slides change.

ContinuousCarousel('myCarousel', {
  announceSlides: false // Disable screen reader announcements
});

Callbacks

onSlideChange

• Type: function(index) | null
• Default: null

Called each time the carousel advances to a new slide. Receives the current slide index.

ContinuousCarousel('myCarousel', {
  onSlideChange: (index) => {
    console.log('Current slide:', index);
  }
});

onPause

• Type: function() | null
• Default: null

Called when the carousel is paused (via API, hover, focus, or visibility).

ContinuousCarousel('myCarousel', {
  onPause: () => {
    console.log('Carousel paused');
  }
});

onPlay

• Type: function() | null
• Default: null

Called when the carousel resumes playing.

ContinuousCarousel('myCarousel', {
  onPlay: () => {
    console.log('Carousel playing');
  }
});

onDestroy

• Type: function() | null
• Default: null

Called when the carousel is destroyed via carousel.destroy().

ContinuousCarousel('myCarousel', {
  onDestroy: () => {
    console.log('Carousel destroyed');
  }
});