LayX
Download
Getting started
Introduction Installation Quick Start CLI
Core Concepts
Overview
Customize
Customize
Layout System
Breakpoints Container Component Layout Component
Main
Base Typography
Components
Accordion Alert Breadcrumb Button Card Carousel Chart Dialog Draggable Form Footer Media Navbar Pagination Popover Sheet Section Tab Tooltip Window
Helpers
Flex and Grid Layout
Utilities
Border Color Display Flex Grid Height Margin Opacity Padding Position Shadow Width Z-index
Others
Background Dynamic Render Icon PWA Partial Render Scroll Driven Animation Smooth Scroll Syntax Highlighter Theme View Transition
About
Contributing License
Carousel

The Carousel component is a slideshow feature for cycling through content such as images or text slides, displayed like a rotating carousel.

Examples

Below are examples of the Carousel component:

First Slide

Second Slide

Third Slide
<carousel indicators controls> <div class="main"> <div class="item"> </div> <div class="item"> </div> </div> </carousel>
Useful Info

Key details for customizing and utilizing the Carousel component:

  • Customize dimensions and appearance using CSS variables like:
    • --height - Set the carousel height.
    • --edge-offset - Define the margin or offset at carousel edges.
  • Use the controls attribute to add navigation controls and indicators to display slide indicators.
  • Add the .vertical class to switch the carousel to vertical orientation.
  • Accessibility features like ARIA attributes are automatically applied.
  • Supports keyboard navigation and mouse drag gestures by default.
  • Each carousel item includes a timeline animation property using --carousel-item in the view timeline.
Options

The Carousel class supports the following configuration options:

  • selector (string): Default is carousel, used to target all carousel elements.
  • mainSelector (string): Default is .main, identifying the scroll container.
  • itemSelector (string): Default is .item, selecting individual carousel items.
  • autoplay (boolean): Default is false, determining whether the carousel auto-plays.
  • autoplayInterval (number): Specifies the auto-play interval in milliseconds.
  • loop (boolean): Default is false, enabling or disabling looped playback of items.
  • mouseDrag (boolean): Default is true, enabling slide transitions via mouse dragging.
  • keyboardNavigation (boolean): Default is true, enabling navigation using keyboard keys.
See Example