Carousel Element

The Carousel element handles rotating collections of content with support for auto-play, touch gestures, and custom navigation controls.

Live Preview

Carousel Preview

Specifications

Carousels consist of several sub-elements to provide full control over the experience:

  • Layout Modes: Toggle between Full (one item at a time) or Free (multiple items visible).
  • Auto-Play: Configure the Interval and optional pause behaviors for automatic rotation.
  • Transitions: Switch between Slide or Fade effects for item movement.
  • Navigation Controls: Use Carousel Navigation elements (prev/next) for manual triggers.
  • Indicators: Add Carousel Indicators in Dots or Lines styles to show current progress.
  • Item Structure: Nest custom children within Carousel Item elements to create slides.

AI Guidance

How to prompt for Carousels:

  • Add an image carousel that automatically rotate every 5 seconds.
  • Create a testmonial carousel with navigation arrows and dot indicators.
  • Insert a sliding product carousel with 3 items visible at once.