The <luna-carousel> component cycles through a series of slides.

Paths

/lunadom/components/carousel/carousel.js

REQUIRED

/lunadom/components/carousel-item/carousel-item.js

REQUIRED

Example

Luna Design System

Ultra-modern web components for elite applications.

High Performance

Lightweight, accessible, and blindingly fast.

Get Started

Fully Customizable

CSS Variable driven architecture for infinite styling.

Customization

Slots
default - One or more <luna-carousel-item> elements

Attributes
autoplay - Automatically advance slides
loop - Loop back to first slide after last
current - Index of the initially visible slide

CSS Variables
--luna-carousel-aspect-ratio - Aspect ratio of the carousel
--luna-carousel-slide-bg - Per-slide background color (on item)

Example Code

<luna-carousel autoplay loop> <luna-carousel-item> <div>Slide 1 Content</div> </luna-carousel-item> <luna-carousel-item> <div>Slide 2 Content</div> </luna-carousel-item> <luna-carousel-item> <div>Slide 3 Content</div> </luna-carousel-item> </luna-carousel>