➤ Indreka Carousel Component

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

It consist of the following property

1. interval :- interval property is a type of a number which accept a numeric value of the automatic interval of time periods. It accepts value in mili seconds. For eg: 2000 means for 2seconds. By default its value is set to be 8000 i.e. 8 seconds. You can change it by passing a value in component.

2. autoplay :- autoplay property is a type of boolean which accept a boolean value either a true or false. It is used for the controlling the autoplay perform action of carousel i.e. carousel is automatially slide or not. By default it value set to be true. Note:- To set the autoplay property to be set as false use .autoplay = "false" or just .autoplay. and for set it true use autoplay = "true" or just autoplay

3. showIndicator :- showIndicator property is a type of boolean which accept a boolean value either a true or false. It is used for show or hiding the indicator of the carousel. By deafault its value is set to be false.

4. showController ;- showController property is a type of boolean which accept a boolean value either a true or false. It is used for show or hiding the arrow button controller of the carousel. By default its value is set to be false.

Indreka Carousel Component

This component represents a carousel with various configuration options.

Properties

slideIndex (Number)

• Description: Current index of the active slide.
• Type: Number

containerHeight (Number - State)

• Description: Height of the carousel container.
• Type: Number
• Default: 0

slideElements (HTMLElement[] - Query Assigned Elements)

• Description: Collection of all slide elements.
• Type: Array of HTMLElements

interval (Number)

• Description: Interval in milliseconds for automatic slide transition in autoplay mode.
• Type: Number
• Default: 5000

autoplay (Boolean)

• Description: Enable or disable automatic slide transitions.
• Type: Boolean
• Default: false

showIndicator (Boolean)

• Description: Show or hide slide indicators.
• Type: Boolean
• Default: false

showController (Boolean)

• Description: Show or hide navigation controls (left and right buttons).
• Type: Boolean
• Default: false

islight (Boolean)

• Description: Control the light or dark theme of the carousel.
• Type: Boolean
• Default: true

wrappedIndex (Computed Property)

• Description: Computes the wrapped index to ensure it's always a valid slide index.
• Type: Number

styles (Array of StyleSheets)

• Description: Styling information for the component.
• Type: Array of StyleSheets

Methods

render()

• Description: Renders the HTML template for the carousel component.

firstUpdated()

• Description: Lifecycle hook called after the component is first updated.

connectedCallback()

• Description: Lifecycle hook called when the component is connected to the DOM.

disconnectedCallback()

• Description: Lifecycle hook called when the component is disconnected from the DOM.

handleKeyDown(event: KeyboardEvent)

• Description: Handles keyboard events for navigation.

updated(changedProperties: PropertyValues<this>)

• Description: Lifecycle hook called when the component is updated.

setActiveSlide(index: number)

• Description: Sets the active slide based on the provided index.

navigateToNextSlide()

• Description: Navigates to the next slide.

navigateToPrevSlide()

• Description: Navigates to the previous slide.

startAutoplay()

• Description: Starts the autoplay functionality.

stopAutoplay()

• Description: Stops the autoplay functionality.

navigateWithAnimation(...)

• Description: Navigates to the next or previous slide with animation.

initializeSlides()

• Description: Initializes the state of each slide (show/hide).

hideSlide(el: HTMLElement)

• Description: Hides the specified slide element.

showSlide(el: HTMLElement)

• Description: Shows the specified slide element.

wrapIndex(idx: number, max: number)

• Description: Wraps the index to ensure it's within the valid range.

➤ Example to use a carousel with autoplay as true

`