packages/ecl/components/ecl-carousel/ecl-carousel.component.ts
Component responsible for rendering a carousel (slideshow) with autoplay, keyboard navigation, and support for RTL layouts. Extends the ECLBaseDirective for consistent styling and behavior.
OnInit
OnDestroy
AfterContentInit
| selector | ecl-carousel |
| imports |
TranslateModule
EclIconComponent
EclCarouselItemComponent
|
| styles |
.ecl-carousel__slides {
transition-duration: 0.4s;
}
|
| templateUrl | ./ecl-carousel.component.html |
Properties |
Methods |
|
Inputs |
Outputs |
HostBindings |
Accessors |
constructor()
|
| 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
|
| slide |
Type : EventEmitter
|
|
Event emitted when a slide change occurs. |
| 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. |
| focusOnButton | ||||||
focusOnButton(button: ElementRef)
|
||||||
|
Sets focus on the specified button.
Parameters :
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 :
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: unknown)
|
||||||
|
Handles key press on the first carousel element to stop autoplay if TAB is pressed.
Parameters :
Returns :
void
|
| onNavBtnKeyboardPress | |||||||||
onNavBtnKeyboardPress(e: KeyboardEvent, index: number)
|
|||||||||
|
Handles keyboard navigation for the navigation buttons.
Parameters :
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: unknown)
|
||||||
|
Handles keyboard interaction on the play button.
Parameters :
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 :
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 :
Returns :
string
|
| 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 |
Type : unknown
|
Default value : false
|
|
Indicates whether autoplay was manually paused. |
| Public isPlaying |
Type : unknown
|
Default value : false
|
|
Indicates whether autoplay is currently active. |
| Public isRtl |
Type : unknown
|
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). |
| cssClasses |
getcssClasses()
|
|
Returns the computed CSS class list for the component.
Returns :
string
|