### File

`packages/ecl/components/ecl-carousel/ecl-carousel.component.ts`

### Description

Component responsible for rendering a carousel (slideshow) with autoplay, keyboard navigation, and support for RTL layouts. Extends the ECLBaseDirective for consistent styling and behavior.

### Extends

`ECLBaseDirective`

### Implements

`OnInit` `OnDestroy` `AfterContentInit`

### Metadata

selector | `ecl-carousel`
imports | `TranslateModule` `EclIconComponent` `EclCarouselItemComponent`
styles | `.ecl-carousel__slides { transition-duration: 0.4s; }`
templateUrl | `./ecl-carousel.component.html`

### Index

###### Properties
ariaRoleDescription carouselContainerElement firstHiddenItem Public isPausedForced Public isPlaying Public isRtl lastHiddenItem navigationButtons pauseButton playButton slides slidesContainer slideWidth transitionDuration
###### Methods
focusOnButton Public getCarouselSlidesOffsetLeft Public getCarouselSlidesOffsetRight Public getCarouselSlidesWidth Public getCurrentSlideIndex Public hasControls isButtonVisible Public isPadded Public isStopButtonPressed onFirstCarouselElementPress onNavBtnKeyboardPress onNextSlideClick onPauseClick onPlayClick onPlayKeyboardPress onPreviousSlideClick onSlideControlClick onSlideHover onSlideHoverout getCssClasses
###### Inputs
aria-label isAutoplay playInterval class e2eAttr tabindex
###### Outputs
slide
###### HostBindings
attr.aria-roledescription class
###### Accessors
cssClasses

### Constructor

`constructor(cdkBreakpointObserver: BreakpointObserver, cd: ChangeDetectorRef, renderer2: Renderer2, eclRtlService: EclRtlService)`
Parameters :
Name | Type | Optional
cdkBreakpointObserver | `BreakpointObserver` | No
cd | `ChangeDetectorRef` | No
renderer2 | `Renderer2` | No
eclRtlService | `EclRtlService` | No

### Inputs

aria-label
Type : `string | null`
Default value : `'Carousel description here'`
Aria-label for screen readers to describe the carousel.

isAutoplay
Type : `boolean`
Determines whether the carousel should autoplay.

playInterval
Type : `number`
Default value : `5000`
Interval in milliseconds between automatic slide transitions.

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### Outputs

slide
Type : `EventEmitter`
Event emitted when a slide change occurs.

### HostBindings

attr.aria-roledescription
Type : `string`
Default value : `'carousel'`
Aria-role description for screen readers, identifying this component as a carousel.

class
Type : `string`
Returns the computed CSS class list for the component.

### Methods

focusOnButton
`focusOnButton(button: ElementRef)`
Sets focus on the specified button. Parameters :
Name | Type | Optional
button | `ElementRef` | No
Returns : `void`

Public getCarouselSlidesOffsetLeft
`getCarouselSlidesOffsetLeft()`
Computes the left offset to shift the slides container. Returns : `number`

Public getCarouselSlidesOffsetRight
`getCarouselSlidesOffsetRight()`
Computes the right offset to shift the slides container (same logic as left in RTL). Returns : `number`

Public getCarouselSlidesWidth
`getCarouselSlidesWidth()`
Calculates the total width of the slides container based on the number of slides. Returns : `number`

Public getCurrentSlideIndex
`getCurrentSlideIndex()`
Retrieves the current active slide index. Corrects index for internal structure with hidden buffer slides. Returns : `number`

Public hasControls
`hasControls()`
Checks whether there are enough slides to render controls. Returns : `boolean`

isButtonVisible
`isButtonVisible(button: ElementRef)`
Checks whether a given button is currently visible (not hidden via style). Parameters :
Name | Type | Optional
button | `ElementRef` | No
Returns : `boolean`

Public isPadded
`isPadded()`
Returns whether the carousel has padding applied (e.g., on desktop breakpoint). Returns : `boolean`

Public isStopButtonPressed
`isStopButtonPressed()`
Returns whether the stop button (pause) has been pressed by the user. Returns : `boolean`

onFirstCarouselElementPress
`onFirstCarouselElementPress(e)`
Handles key press on the first carousel element to stop autoplay if TAB is pressed. Parameters :
Name | Optional
e | No
Returns : `void`

onNavBtnKeyboardPress
`onNavBtnKeyboardPress(e: KeyboardEvent, index: number)`
Handles keyboard navigation for the navigation buttons. Parameters :
Name | Type | Optional
e | `KeyboardEvent` | No
index | `number` | No
Returns : `void`

onNextSlideClick
`onNextSlideClick()`
Navigates to the next slide and stops autoplay. Returns : `void`

onPauseClick
`onPauseClick()`
Stops autoplay and focuses the play button. Returns : `void`

onPlayClick
`onPlayClick()`
Starts autoplay and focuses the pause button. Returns : `void`

onPlayKeyboardPress
`onPlayKeyboardPress(e)`
Handles keyboard interaction on the play button. Parameters :
Name | Optional
e | No
Returns : `void`

onPreviousSlideClick
`onPreviousSlideClick()`
Navigates to the previous slide and stops autoplay. Returns : `void`

onSlideControlClick
`onSlideControlClick(slide: EclCarouselItemComponent)`
Handles user interaction with a slide control button. Parameters :
Name | Type | Optional
slide | `EclCarouselItemComponent` | No
Returns : `void`

onSlideHover
`onSlideHover()`
Pauses autoplay on mouse hover. Returns : `void`

onSlideHoverout
`onSlideHoverout()`
Resumes autoplay on mouse leave, if not manually paused. Returns : `void`

getCssClasses
`getCssClasses(rootClass: string)`
Parameters :
Name | Type | Optional
rootClass | `string` | No
Returns : `string`

### Properties

ariaRoleDescription
Type : `string`
Default value : `'carousel'`
Decorators : `@HostBinding('attr.aria-roledescription')`
Aria-role description for screen readers, identifying this component as a carousel.

carouselContainerElement
Type : `ElementRef`
Decorators : `@ViewChild('carouselContainer')`
Reference to the main carousel container element.

firstHiddenItem
Type : `EclCarouselItemComponent`
Decorators : `@ViewChild('firstHiddenItem')`
Reference to the first hidden slide item (used for focus management).

Public isPausedForced
Default value : `false`
Indicates whether autoplay was manually paused.

Public isPlaying
Default value : `false`
Indicates whether autoplay is currently active.

Public isRtl
Default value : `false`
Indicates whether the layout is currently in RTL mode.

lastHiddenItem
Type : `EclCarouselItemComponent`
Decorators : `@ViewChild('lastHiddenItem')`
Reference to the last hidden slide item (used for focus management).

navigationButtons
Type : `QueryList<ElementRef>`
Decorators : `@ViewChildren('currButton')`
References to the navigation buttons corresponding to each slide.

pauseButton
Type : `ElementRef`
Decorators : `@ViewChild('pauseButton')`
Reference to the pause button element.

playButton
Type : `ElementRef`
Decorators : `@ViewChild('playButton')`
Reference to the play button element.

slides
Type : `QueryList<EclCarouselItemComponent>`
Decorators : `@ContentChildren(undefined)`
Collection of slide components rendered inside the carousel.

slidesContainer
Type : `ElementRef`
Decorators : `@ViewChild('slidesContainer')`
Reference to the slides container element.

slideWidth
Type : `number`
Width of a single slide, used for positioning and transitions.

transitionDuration
Type : `number`
Default value : `0.4`
Duration of the slide transition animation (in seconds).

### Accessors

cssClasses
get `cssClasses()`
Returns the computed CSS class list for the component. Returns : `string`

# results matching ""

# No results matching ""