SiCarouselComponent documentation¶

selector

si-carousel

A carousel component for displaying slides with navigation controls and auto-play.

Features horizontal scrolling with snap behavior, pagination dots, and ARIA accessibility. Suitable for dashboards, image galleries, and content showcases.

Example:

typescript
import { SiCarouselComponent, SiCarouselItemDirective } from '@siemens/element-ng/carousel';

@Component({
  imports: [SiCarouselComponent, SiCarouselItemDirective],
  template: `
    <si-carousel>
      <div siCarouselItem><h2>Slide 1</h2></div>
      <div siCarouselItem><h2>Slide 2</h2></div>
      <div siCarouselItem><h2>Slide 3</h2></div>
    </si-carousel>
  `
})
export class MyComponent {}

Input Properties¶

Name	Type	Default	Description
ariaRole ¶	(`"group"` \| `"region"`)	`'region'`	Aria role of the carousel element. Can be set to 'region' or 'group' depending on the desired accessibility semantics.
autoPlay ¶	(`number` \| `boolean`)	`false`	Enables or configures auto-play for the carousel. When set to `true` , the carousel automatically navigates to the next slide every 5000 milliseconds (5 seconds). Pass a positive number to set a custom interval in milliseconds. Pass `false` to disable auto-play.
carouselRoleDescription ¶	`TranslatableString`	$localize`:@@SI_CAROUSEL.ROLE_DESCRIPTION:carousel`	Role description for the carousel container, used for accessibility purposes.
hidePageControls ¶	`boolean`	`false`	Controls whether pagination controls are shown. When `true` , the carousel shows one slide per page and hides pagination controls.
nextButtonAriaLabel ¶	`TranslatableString`	$localize`:@@SI_CAROUSEL.NEXT:Next slide`	Aria label for the next button, used for accessibility purposes.
pauseButtonLabel ¶	`TranslatableString`	$localize`:@@SI_CAROUSEL.PAUSE:Pause`	Label for the pause button when autoplay is active.
playButtonLabel ¶	`TranslatableString`	$localize`:@@SI_CAROUSEL.PLAY:Play`	Label for the play button when autoplay is paused.
previousButtonAriaLabel ¶	`TranslatableString`	$localize`:@@SI_CAROUSEL.PREVIOUS:Previous slide`	Aria label for the previous button, used for accessibility purposes.
slidePageAriaLabel ¶	`TranslatableString`	$localize`:@@SI_CAROUSEL.SLIDE_PAGE:Slide {{page}} of {{total}}`
slideRoleDescription ¶	`TranslatableString`	$localize`:@@SI_CAROUSEL.SLIDE_ROLE_DESCRIPTION:Slide`	Role description for each slide, used for accessibility purposes.

Types Documentation¶

TranslatableString (`string` & `Translatable`)¶ Type alias Represents a translatable string. This can either be a translation key, e.g. `ACTIONS.EDIT` that will be automatically translated when displayed on the UI or a pre-translated string, e.g. `Edit` . Equivalent to a normal string in usage and functionality.

Translatable ¶ import imported from @siemens/element-translate-ng

Except where otherwise noted, content on this site is licensed under MIT License.