Carousel

2026.1

Requires Celeste 2026.1

Slide 01
Slide 02
Slide 03
Slide 04

External Dependencies

This component requires splidejs, install it via NPM:

npm install @splidejs/splide

Properties

Prop	Description
options	Splide options object

How to use it

<Carousel id="carousel-example" name="Carousel Example">
    <Carousel.Item>
        <div class="bg-gradient-to-br from-pink-500 to-purple-500 h-64 flex items-center justify-center text-white text-center px-lg py-md">
            Slide 01
        </div>
    </Carousel.Item>
    <Carousel.Item>
        <div class="bg-gradient-to-br from-purple-500 to-blue-500 h-64 flex items-center justify-center text-white text-center px-lg py-md">
            Slide 02
        </div>
    </Carousel.Item>
    <Carousel.Item>
        <div class="bg-gradient-to-br from-blue-500 to-teal-500 h-64 flex items-center justify-center text-white text-center px-lg py-md">
            Slide 03
        </div>
    </Carousel.Item>
    <Carousel.Item>
        <div class="bg-gradient-to-br from-teal-500 to-green-500 h-64 flex items-center justify-center text-white text-center px-lg py-md">
            Slide 04
        </div>
    </Carousel.Item>
</Carousel>