# Carousel

Content you can browse slide by slide.

## How to use it

Options come from react-slick. Use settings or opts and provide controls so navigation does not depend on gestures or autoplay.



## Import


```tsx
import { Carousel, CarouselContent, CarouselItem, CarouselControls, CarouselPrevious, CarouselNext, CarouselPlay, CarouselPause } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
<Carousel style={{width:320}} settings={{dots:true,infinite:false}}><CarouselContent>{["An idea", "A team", "A project"].map(title => <CarouselItem key={title}><Card style={{padding:48,textAlign:"center"}}>{title}</Card></CarouselItem>)}</CarouselContent><CarouselControls><CarouselPrevious aria-label="Previous" /><CarouselNext aria-label="Next" /></CarouselControls></Carousel>
```


## API: Carousel


```typescript
Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| opts | any | No | See the published type. |
| orientation | "horizontal" \| "vertical" | No | Horizontal or vertical axis. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| setApi | ((api: any) => void) | No | See the published type. |
| settings | any | No | See the published type. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

## API: CarouselContent


```typescript
declare function CarouselContent({ children }: CarouselContentProps): React.JSX.Element;
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |

## API: CarouselItem


```typescript
CarouselItem: React.ForwardRefExoticComponent<CarouselItemProps & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

## API: CarouselControls


```typescript
CarouselControls: React.ForwardRefExoticComponent<CarouselControlsProps & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

## API: CarouselPrevious


```typescript
CarouselPrevious: React.ForwardRefExoticComponent<Omit<ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| disabled | boolean | No | Disable interaction with the control. |
| id | string | No | Element identifier; associates labels and descriptions. |
| name | string | No | Name used to identify the control in forms. |
| onChange | ChangeEventHandler<HTMLButtonElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLButtonElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLButtonElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| size | "default" \| "sm" \| "lg" \| "icon" \| null | No | Visual size of the component. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |
| type | "button" \| "submit" \| "reset" | No | Operation type or mode; values depend on the component. |
| value | string \| number \| readonly string[] | No | Controlled value. Update it from the change callback. |
| variant | "default" \| "link" \| "destructive" \| "secondary" \| "outline" \| "ghost" \| null | No | Visual variant. Use a value supported by this component. |

## API: CarouselNext


```typescript
CarouselNext: React.ForwardRefExoticComponent<Omit<ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| disabled | boolean | No | Disable interaction with the control. |
| id | string | No | Element identifier; associates labels and descriptions. |
| name | string | No | Name used to identify the control in forms. |
| onChange | ChangeEventHandler<HTMLButtonElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLButtonElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLButtonElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| size | "default" \| "sm" \| "lg" \| "icon" \| null | No | Visual size of the component. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |
| type | "button" \| "submit" \| "reset" | No | Operation type or mode; values depend on the component. |
| value | string \| number \| readonly string[] | No | Controlled value. Update it from the change callback. |
| variant | "default" \| "link" \| "destructive" \| "secondary" \| "outline" \| "ghost" \| null | No | Visual variant. Use a value supported by this component. |

## API: CarouselPlay


```typescript
CarouselPlay: React.ForwardRefExoticComponent<Omit<ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| disabled | boolean | No | Disable interaction with the control. |
| id | string | No | Element identifier; associates labels and descriptions. |
| name | string | No | Name used to identify the control in forms. |
| onChange | ChangeEventHandler<HTMLButtonElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLButtonElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLButtonElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| size | "default" \| "sm" \| "lg" \| "icon" \| null | No | Visual size of the component. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |
| type | "button" \| "submit" \| "reset" | No | Operation type or mode; values depend on the component. |
| value | string \| number \| readonly string[] | No | Controlled value. Update it from the change callback. |
| variant | "default" \| "link" \| "destructive" \| "secondary" \| "outline" \| "ghost" \| null | No | Visual variant. Use a value supported by this component. |

## API: CarouselPause


```typescript
CarouselPause: React.ForwardRefExoticComponent<Omit<ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| disabled | boolean | No | Disable interaction with the control. |
| id | string | No | Element identifier; associates labels and descriptions. |
| name | string | No | Name used to identify the control in forms. |
| onChange | ChangeEventHandler<HTMLButtonElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLButtonElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLButtonElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| size | "default" \| "sm" \| "lg" \| "icon" \| null | No | Visual size of the component. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |
| type | "button" \| "submit" \| "reset" | No | Operation type or mode; values depend on the component. |
| value | string \| number \| readonly string[] | No | Controlled value. Update it from the change callback. |
| variant | "default" \| "link" \| "destructive" \| "secondary" \| "outline" \| "ghost" \| null | No | Visual variant. Use a value supported by this component. |

Source: https://kivora.pro/docs/componentes/carousel