Carousel Item

The Carousel Item component (ion-carouselItem) represents an individual slide within an ion-carousel. It is placed inside the carousel’s bs-carousel placeholder and uses the Helium datasource template (Title + Copy). Each Carousel Item exposes its own bs-section placeholder, allowing any nested content — paragraphs, images, grids, features — to be embedded inside a slide.

The component automatically tracks its position in the carousel. The first item receives the Bootstrap active class and aria-current=“true”. Each item also registers a corresponding indicator button (via the shared section system) that enables direct-slide navigation when the parent carousel’s ShowIndicators option is enabled.

Examples

Live Example

The Carousel Item is demonstrated on the Carousel page as part of a live carousel with three slides. Each slide below shows how a Carousel Item wraps nested content via its bs-section placeholder. The first item automatically receives the active class, and the parent carousel renders prev/next buttons and indicator dots based on the number of items present.

Usage Notes

Notes

  • Carousel Items must be placed inside an ion-carousel’s bs-carousel placeholder. They will not function correctly outside of a carousel context.
  • The component uses the Helium datasource template which provides Title and Copy fields. These fields are available on the datasource item but are not directly rendered by the default view — they serve as metadata/reference. Visible slide content comes from components nested in the bs-section placeholder.
  • The first Carousel Item in the sequence automatically receives the carousel-item active classes. All subsequent items receive only carousel-item and are hidden until navigated to.
  • Each item registers an indicator <button> with data-bs-slide-to set to its zero-based index. This button is rendered in the parent carousel’s indicator container when ShowIndicators is enabled.
  • The slide index is tracked using a shared rendering data stack (Html.PushRenderingData / Html.PeekRenderingData). This means Carousel Items are order-dependent and should not be re-ordered without testing.
  • The inner bs-section placeholder supports any BSTools5 component: paragraphs, features, grids, images, etc. This makes Carousel Items highly flexible for building rich slide layouts.
  • In Experience Editor, the carousel-item class is removed so all slides render inline for authoring. The active class is still applied to the first item.
  • The AddClass rendering parameter is applied to the inner row wrapper (div.@rowClasses), not the outer carousel-item div. Use it for row-level layout adjustments.
  • The outer div receives an auto-generated id attribute used by the parent carousel’s indicator buttons for data-bs-target targeting.

Control Properties

Control Properties

Rendering Parameters

ParameterTypeDescription
AddClassSingle-Line TextAdditional CSS class(es) appended to the inner row wrapper div for per-slide layout adjustments.

Datasource Fields (Helium)

FieldTypeDescription
TitleSingle-Line TextAvailable on the datasource for reference and can be used by custom nested components, but not rendered by the default carousel item view.
CopyRich TextAvailable on the datasource for reference and can be used by custom nested components, but not rendered by the default carousel item view.

Placeholders

PlaceholderDescription
bs-sectionThe main content area of the slide. Accepts any BSTools5 component (paragraphs, grids, features, images, etc.) to build the visible slide content.

Template properties

Control properties