Skip to content

Carousel

Structures children (often Cards) in a carousel.

---
import { Card, Carousel } from 'fulldev-ui'
---
<Carousel>
<Card>Card</Card>
<Card>Card</Card>
<Card>Card</Card>
<Card>Card</Card>
<Card>Card</Card>
<Card>Card</Card>
</Carousel>

Props

size

Type: size?: 'sm' | 'md' | 'lg'

Sets the size for this component and all its children.

This also defined the amount of columns, together with the viewport width.

---
import { Card, Carousel } from 'fulldev-ui'
---
<Carousel size="sm">
<Card>Card</Card>
<Card>Card</Card>
<Card>Card</Card>
<Card>Card</Card>
<Card>Card</Card>
<Card>Card</Card>
</Carousel>
---
import { Card, Carousel } from 'fulldev-ui'
---
<Carousel size="md">
<Card>Card</Card>
<Card>Card</Card>
<Card>Card</Card>
<Card>Card</Card>
<Card>Card</Card>
<Card>Card</Card>
</Carousel>
---
import { Card, Carousel } from 'fulldev-ui'
---
<Carousel size="lg">
<Card>Card</Card>
<Card>Card</Card>
<Card>Card</Card>
<Card>Card</Card>
<Card>Card</Card>
<Card>Card</Card>
</Carousel>

theme

Type: theme?: 'light' | 'dark' | string

Changes the colors for this component and all its children.

Choose a predefined theme, or a custom value defined like explained in the theming guide.

as & HTML Attributes

Type: as?: HTMLTag = 'div'

Used to determine which HTML tag is used to render the component.

Based on the value, all HTML attributes of this tag are accepted as props too.

For a detailed explanation see Polymorphic props in the Astro documentation.