Carousel¶
The carousel displays a set of slides with navigation controls and optional auto-play.
Usage¶
Design¶
Code¶
The si-carousel component uses the siCarouselItem directive to mark each slide. Slides are displayed horizontally with snap-scroll behavior.
Usage¶
import { SiCarouselComponent, SiCarouselItemDirective } from '@siemens/element-ng/carousel';
@Component({
imports: [SiCarouselComponent, SiCarouselItemDirective, ...]
})
<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>
SiCarouselComponent API Documentation¶
selector
si-carouselA 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¶
| 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.