Carousel

Explore Bramble UI's interactive carousel component for dynamic content showcasing. Create captivating web experiences with modern carousel features.

Usage

import Data from '@/data/dogs.json'
import {Carousel} from '@/ui''

/* Data example
[
	{
		"name": "akita",
		"src": "/img/dogs/akita.jpg",
		"description": "The Akita is a Japanese dog breed of large size...",
		"link": "https://en.wikipedia.org/wiki/Akita_(dog)"
	},
	...
] */

<Carousel
    data={Data}
    caption={true}
	gallery={true}
/>

Gallery

Autoplay

<Carousel
    data={Data}
	autoplay={true}
	gallery={true}
/>

Cards

<Carousel
    data={Data}
	theme='light'
/>

Cards - Autoplay

<Carousel
    data={Data}
	autoplay={true}
	theme='light'
/>

RTL

<div dir='rtl'>
	<Carousel
		data={Data}
		theme='light'
		rtl={true}
	/>
</div>