Carousel

Carousel shows images or content in a scrollable horizontal view. Supports snap points, vertical layout, and full-width items.

const { default: Carousel } = await import('/components/data-display/carousel.js');

const { tags, $ } = Lightview;

const images = [
    'https://picsum.photos/400/300?random=1',
    'https://picsum.photos/400/300?random=2',
    'https://picsum.photos/400/300?random=3',
    'https://picsum.photos/400/300?random=4'
];

const carousel = Carousel({ snap: 'center', class: 'rounded-box bg-neutral p-4 gap-4' },
    ...images.map((src, i) => 
        Carousel.Item({ src, alt: `Slide ${i + 1}`, class: 'rounded-box' })
    )
);

$('#demo').insert(carousel);

const { default: Carousel } = await import('/components/data-display/carousel.js');
const { default: Button } = await import('/components/actions/button.js');

const { signal, tags, $ } = Lightview;
const { div, a } = tags;

const slides = [
    { id: 'slide1', img: 'https://picsum.photos/800/400?random=10', title: 'Welcome' },
    { id: 'slide2', img: 'https://picsum.photos/800/400?random=11', title: 'Features' },
    { id: 'slide3', img: 'https://picsum.photos/800/400?random=12', title: 'Get Started' }
];

const demo = div({},
    Carousel({ full: true, class: 'w-full' },
        ...slides.map((slide, i) => 
            div({ id: slide.id, class: 'carousel-item relative w-full' },
                tags.img({ src: slide.img, class: 'w-full' }),
                div({ class: 'absolute left-5 right-5 top-1/2 flex -translate-y-1/2 justify-between' },
                    a({ href: `#${slides[(i - 1 + slides.length) % slides.length].id}`, class: 'btn btn-circle' }, '❮'),
                    a({ href: `#${slides[(i + 1) % slides.length].id}`, class: 'btn btn-circle' }, '❯')
                )
            )
        )
    ),
    div({ class: 'flex justify-center w-full py-2 gap-2' },
        ...slides.map((slide, i) => 
            a({ href: `#${slide.id}`, class: 'btn btn-xs' }, i + 1)
        )
    )
);

$('#demo').insert(demo);

Props

Sub-components

Centered Carousel