Carousel

The Carousel component (ion-carousel) renders a Bootstrap 5 rotating content slider that cycles through Carousel Item children. It is a structural Ion-type component — it does not use a datasource template. All behaviour is controlled via rendering parameters.

Each slide is represented by a Carousel Item (ion-carouselItem) rendering placed inside the carousel’s bs-carousel placeholder. Carousel Items accept a Helium datasource (Title + Copy) and expose their own bs-section placeholder for embedding any nested content. The carousel automatically tracks slide indices and generates indicator buttons and prev/next controls based on the configured options.

Examples

Live Example

Below is a live ion-carousel rendering configured with ShowButtons, ShowIndicators, and CarouselFade enabled. It contains three Carousel Item slides, each with a simple content paragraph. Use the previous/next arrows or the indicator dots to navigate between slides. The crossfade transition produces a smooth opacity blend rather than the default horizontal slide.

Usage Notes

Notes

  • The Carousel (ion-carousel) is a structural component with no datasource. All configuration is done through rendering parameters.
  • Slides are added by placing Carousel Item (ion-carouselItem) renderings inside the bs-carousel placeholder. Each Carousel Item uses the Helium datasource template (Title + Copy) and opens its own bs-section placeholder for nested content.
  • The first Carousel Item automatically receives the active class and aria-current=“true”. Subsequent items are hidden until navigated to.
  • When ShowIndicators is enabled, each Carousel Item registers an indicator button via the shared section system. Indicators use data-bs-slide-to for direct slide access.
  • When ShowButtons is enabled, previous/next arrow buttons are rendered after the .carousel-inner container. These buttons use data-bs-slide=“prev” and data-bs-slide=“next”.
  • CarouselFade replaces the default horizontal sliding transition with an opacity crossfade by adding the carousel-fade class.
  • EnableSlider switches the carousel to a slider mode (adds class carousel-slider) which can be used for custom horizontal scroll behaviour via CSS/JS.
  • DarkVariant sets data-bs-theme=“dark” on the carousel container, inverting control colours for use on light backgrounds.
  • Autoplay enables the Bootstrap ride behaviour (data-bs-ride=“true”) so slides advance automatically on a timed interval.
  • In Experience Editor, the fixed carousel classes are removed so all items render inline for easy authoring.
  • The carousel uses role=“region” and aria-label for accessibility. Each indicator button includes aria-label=“Slide N”.
  • The AddClass parameter can be used to append custom CSS classes to the Carousel Item wrapper for per-slide styling.

Control Properties

Control Properties

Carousel Rendering Parameters

ParameterTypeDescription
ShowButtonsCheckboxWhen checked, renders previous/next arrow buttons for manual navigation.
ShowIndicatorsCheckboxWhen checked, renders dot indicators below the slides for direct slide access.
AutoplayCheckboxWhen checked, the carousel automatically advances slides on a timed interval (data-bs-ride="true").
DarkVariantCheckboxSets data-bs-theme="dark" to invert control colours for light backgrounds.
CarouselFadeCheckboxAdds carousel-fade class for a crossfade transition instead of the default slide.
EnableSliderCheckboxAdds carousel-slider class for a horizontal scroll/slider mode.
AddClassSingle-Line TextAdditional CSS class(es) appended to the carousel container.
data-testidSingle-Line TextOptional test identifier attribute for automated testing selectors.

Carousel Item Rendering Parameters

ParameterTypeDescription
AddClassSingle-Line TextAdditional CSS class(es) appended to the carousel item wrapper for per-slide styling.

Carousel Item Datasource Fields (Helium)

FieldTypeDescription
TitleSingle-Line TextNot directly rendered by the default carousel item view but available on the datasource for reference or custom use.
CopyRich TextNot directly rendered by the default carousel item view but available on the datasource for reference or custom use.

Template properties

Control properties