Carousel

await import('/components/data-display/carousel.js');
await import('/components/actions/button.js');
const { signal, tags, $ } = Lightview;
const { div, a, Carousel } = 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 = Carousel({ full: true, style: 'width: 100%' },
    ...slides.map((slide, i) => 
        div({ id: slide.id, class: 'carousel-item', style: 'position: relative; width: 100%' },
            tags.img({ src: slide.img, style: 'width: 100%' }),
            a({ href: `#${slides[(i - 1 + slides.length) % slides.length].id}`, class: 'btn btn-circle', style: 'position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%)' }, '❮'),
            a({ href: `#${slides[(i + 1) % slides.length].id}`, class: 'btn btn-circle', style: 'position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%)' }, '❯')
        )
    )
);

$('#example').content(demo);

await import('/components/data-display/carousel.js');
await import('/components/actions/button.js');
const { $, tags } = Lightview;
const { div, img, a, Carousel } = 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 = {
    tag: Carousel,
    attributes: { full: true, style: 'width: 100%' },
    children: slides.map((slide, i) => ({
        tag: div,
        attributes: { id: slide.id, class: 'carousel-item', style: 'position: relative; width: 100%' },
        children: [
            { tag: img, attributes: { src: slide.img, style: 'width: 100%' } },
            { tag: a, attributes: { href: `#${slides[(i - 1 + slides.length) % slides.length].id}`, class: 'btn btn-circle', style: 'position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%)' }, children: ['❮'] },
            { tag: a, attributes: { href: `#${slides[(i + 1) % slides.length].id}`, class: 'btn btn-circle', style: 'position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%)' }, children: ['❯'] }
        ]
    }))
};

$('#example').content(demo);

await import('/components/data-display/carousel.js');
await import('/components/actions/button.js');
const { $ } = Lightview;

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 = {
    Carousel: {
        full: true,
        style: 'width: 100%',
        children: slides.map((slide, i) => ({
            div: {
                id: slide.id,
                class: 'carousel-item',
                style: 'position: relative; width: 100%',
                children: [
                    { img: { src: slide.img, style: 'width: 100%' } },
                    { a: { href: `#${slides[(i - 1 + slides.length) % slides.length].id}`, class: 'btn btn-circle', style: 'position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%)', children: ['❮'] } },
                    { a: { href: `#${slides[(i + 1) % slides.length].id}`, class: 'btn btn-circle', style: 'position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%)', children: ['❯'] } }
                ]
            }
        }))
    }
};

$('#example').content(demo);