Docebo libraries documentation site
vdevelop
Get Started
Guides
Overview Icons Illustrations Theme
Components
Accordion Avatar Badge Alert Badge Icon Badge Status Blank Slate Button Calendar Card Carousel Chip Data Browser Expandable Content Facet List
Filters
Filter Filter Container Filter Multiple Selection Filter Single Selection Filter Slider Range Selection Filter Slider Selection
Helper Message Icon Illustration
Inputs
Input Autocomplete Input Checkbox Input Checkbox Group Input Combobox Input Date Input Password Input Radio Group Input Rating Input Search Input Select Input Slider Input Text Input Toggle Input Upload
Link List List Listbox List Navigation List Presentation List Sheet List Tablist List Tree Menu Modal Dialog Navigation Notification Pagination Bar Popover Progress Skeleton Stepper Table Toast Tooltip
API References
Components Carousel

Carousel

 Overview API Examples Style Tokens

The Carousel component is a customizable slideshow for cycling through a series of content cards, images, or other elements.

Basic usage

The Carousel provides a scrollable container with navigation controls and supports both light and dark themes.

Component anatomy

Content Structure

The Carousel offers multiple content zones through component projection:

The component provides intuitive navigation controls that automatically adapt to the content:

  • Previous/Next buttons for incremental scrolling
  • RTL/LTR support with automatic control mirroring
  • Current page indicator
  • Disabled state for boundary conditions
  • Smooth transitions between views

Items Display

Each item in the carousel can be configured independently:

  • Flexible width support for each item
  • Consistent gap spacing between items
  • Automatic chunk calculation for pagination
  • Smooth scrolling animation

Responsive Behavior

The Carousel adapts to different viewport sizes:

  • Responsive header layout
  • Container-based sizing
  • Dynamic chunk recalculation
  • Focus ring adjustment for keyboard navigation

Negative Theme

For use on dark backgrounds, enable the negative theme variant using the negative Input. This adjusts colors for:

  • Title and description text
  • Navigation controls
  • Pagination indicators
  • Child components

Accessibility

Keyboard Navigation

The Carousel implements comprehensive keyboard support:

  • Arrow keys for item navigation
  • Focus management for interactive elements
  • Proper focus order through content
  • Keyboard focus indicators

ARIA Implementation

The component includes proper ARIA attributes:

  • Region role for the carousel
  • Navigation role for controls
  • List role for items container
  • Live region for page updates
  • Proper labelling relationships

Focus Management

Focus handling ensures a smooth user experience:

  • Visible focus indicators in keyboard navigation mode
  • Proper tab order through interactive elements
  • Focus containment within active elements
  • Clear visual feedback

Best Practices for Developers

  1. Content Organization DEMO HERE

  2. Navigation Implementation DEMO HERE

  3. Responsive Guidelines DEMO HERE

Previous
Card
Next
Chip