Carousel
The carousel component typically has a container element that holds all the slides and defines the overall layout and dimension of the component.
| Type | Resource |
|---|---|
| Design | Figma |
| Web | Web Storybook |
| Code | Gitlab |
Usage
import { Carousel } from 'bio-bind-ui';<Carousel
config={{
autoplay: true,
autoplaySpeed: 3000,
showIndicators: true,
showNavigation: true,
speed: 200,
}}
id='carousel'
items={[
{
content:
'Lorem Ipsum is simply dummy text of the printing and typesetting industry',
href: 'https://picsum.photos/id/11/400/200',
image: 'https://picsum.photos/id/11/400/200',
title: 'Lorem Ipsum',
},
{
content:
'Lorem Ipsum is simply dummy text of the printing and typesetting industry',
href: 'https://picsum.photos/id/11/400/200',
image: 'https://picsum.photos/id/11/400/200',
title: 'Lorem Ipsum',
},
]}
name='carousel'
radius='none'
slideType='full'
style={{}}
/>Examples
Slide Type
Use slide type for change the type of carousel slide: full or boxed
Radius (Optional)
Use radius type for change the corner radius of carousel: none, xs, sm, md, xl, full
Mode (Optional)
Use mode type for change the color mode of carousel: light or dark
Props
| Props | Required | Default | Type | Description |
|---|---|---|---|---|
| slideType | false | full | full boxed | For change slideType of the carousel slide. |
| id | true | carousel | string | For set id of the carousel component. |
| name | true | carousel | string | For set name of the carousel component. |
| items | true | - | Item[] | For display the data of carousel. |
| radius | false | none | none xs sm md xl full | For change corner radius of the carousel slide. |
| config | true | - | carouselconfig | For change the config of carousel, like speed or autoplay. |
| style | false | - | CSSProperties | For custom styles for the carousel component. |
| speed | false | - | number | For setting the speed of carousel transition. |
| autoplay | false | - | boolean | For enabling autoplay of the carousel. |
| autoplaySpeed | false | - | number | For setting the autoplay speed in milliseconds. |
| showIndicators | false | - | boolean | For displaying carousel indicators. |
| showNavigation | false | - | boolean | For displaying navigation controls (left and right arrows). |
| image | false | - | string | For setting the image URL of a carousel slide. |
| href | false | - | string | For setting the hyperlink for each carousel slide. |
| title | false | - | string | For setting the title of the carousel slide. |
| content | false | - | string ReactNode | For setting content within the carousel slide. |
| extras | false | - | Record<string, string> | For adding extra attributes or data to the carousel. |
| controlLeft | false | - | ReactNode | For custom left control (navigation). |
| controlRight | false | - | ReactNode | For custom right control (navigation). |
| indicator | false | - | ReactNode | For customizing the indicator of the carousel. |
| height | false | - | number | For setting the height of the carousel component. |
| bodyBuilder | false | - | string ReactNode | For custom content rendering inside the carousel. |