Carousel
Carousel show images or content in a scrollable area.
Usage
import { Carousel } from 'stwui';
import type { CarouselSlide } from 'stwui/types';
import Carousel from 'stwui/carousel';
import type CarouselSlide from 'stwui/types/carousel-slide';
<script lang="ts">
import { Carousel } from 'stwui';
import type { CarouselSlide } from 'stwui/types';
const slides: CarouselSlide[] = [
{
id: '1',
src: 'https://mdbcdn.b-cdn.net/img/new/slides/041.webp',
alt: 'Wild Landscape'
},
{
id: '2',
src: 'https://mdbcdn.b-cdn.net/img/new/slides/042.webp',
alt: 'Camera'
},
{
id: '3',
src: 'https://mdbcdn.b-cdn.net/img/new/slides/043.webp',
alt: 'Exotic Fruits'
}
];
</script>
<div class="h-[36rem]">
<Carousel {slides} />
</div>
Carousel Class Identifiers
stwui-carousel-wrapper |
stwui-carousel-slide-indicators-wrapper |
stwui-carousel-slides-wrapper |
stwui-carousel-previous |
stwui-carousel-next |