Examples
Examples
Basic Usage
This basic example demonstrates how to use the Carousel to create a simple, scrollable story card carousel. It includes multiple slides with content overflow, default navigation, draggable slides, and skip link button, making it easy to showcase content in a compact, interactive format with minimal setup.
Mixed Content
The carousel supports mixed content types and automatically adjusts each slide's height to maintain a consistent width and layout.
Content-Based Slide Width
Each slide adapts its width based on its content, allowing for a more flexible and dynamic layout. Unlike fixed-width slides, this approach is ideal for displaying text blocks, cards, or mixed media elements of varying sizes.
Lightbox
Centered layout displays one slide at a time with visible offsets of adjacent slides. This approach creates a focused viewing experience while hinting at additional content, encouraging interaction through subtle visual cues.
Contained Layout with defined Slides per View
The carousel can set a number of slides to display simultaneously, offering a clean and structured layout. Navigation controls allow users to scroll through additional slides while maintaining a consistent per view format.
Center-aligned with inifinite looping
The carousel can be center-aligned and configured to loop infinitely, creating a smooth and uninterrupted browsing experience. For looping to function correctly, ensure that the number of slides is greater than the number of slides per view. Centering will not function correctly if slidesToScroll is greater than or equal to slidesPerView.
Event Debouncing
The eventsDebounce property allows you to specify debounce delays (in milliseconds) for carousel events, reducing how often they are emitted during rapid user interactions or animations. This is useful for optimizing performance and preventing excessive event handling in your application.
The following events are controlled by eventsDebounce.
export interface EventsDebounce {
/** Default: 450 */
containerviewchange?: number;
/** Default: 450 */
slidesinview?: number;
/** Default: 0 */
carouselprogress?: number;
/** Default: 450 */
slidechange?: number;
}