You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2.5 KiB
2.5 KiB
| slug | title |
|---|---|
| carousel | Carousel |
Creates carousel component.
<Carousel />
Props
| Name | type | required | default | descripiton |
|---|---|---|---|---|
| children | Node[] | true | [] | Child items that will be wrapped by carousel |
| show | number | false | 1 | number of items to show at per slide |
| slide | number | false | 1 | number of how many items to slide |
| infinite | boolean | false | true | scrolling infinity |
| transition | number | false | 0.5 | same as css transition property's second value |
| swiping | boolean | false | false | enable swiping/dragging with mouse/touch events |
| swipeOn | number | false | 1 | percantage of item width that slides when user drag count exceeds |
| responsive | boolean | false | false | enables the feature that adjusts items width according to screen size dynamically |
| className | string | false | "" | same as react's className property |
| useArrowKeys | boolean | false | false | enables sliding when press arrow keys |
| a11y | Array | false | {} | accessibility attributes |
| dynamic | Boolean | false | false | if items are stateful, specify this option as true. Also give unique key to each item (like id) |
| rightArrow | ReactElement | false | null | custom right arrow component |
| leftArrow | ReactElement | false | null | custom left arrow component |