zilly-ui/src/carousel/carousel.mdx

Zilly web react ui components

---
name: Carousel
---

import { Playground, Props, } from "docz";
import  Box  from "../box";
import Carousel from "./carousel";

# Carousel
A carousel component. Scales with its container.

## Props
|Property | Description | Type | Default |
:---|:---|:---|:---|
|autoplay| Whether to scroll automatically | boolean | true |
|dotPosition| The position of the dots, which can be one of top bottom left right | string | bottom |
|duration| Set how long an animation should take to complete one cycle. | number | 1 |
|dots| Whether to show the dots at the bottom of the gallery | boolean | true |
|easing| Transition interpolation function name | string \| number[] \| EasingFunction | linear |
|pager| Whether to display the paging controller | boolean | true |
|playSpeed| Set the animator's play speed | number | 1 |
|height| css height | string \| number | 200 |
|effect| Transition effect | scroll \| fade| scroll |
|handleChange| Callback function called after the current index changes |(current)=> void| - |
|handleClickItem| callback function called click the item | (current)=> void| - |
|next| Change current slide to next slide | () => void| - |
|prev| Change current slide to previous slide | () => void| - |



<Props of={Box} />

## Basic usage

<Playground>
      <Carousel autoplay={false}  height={100}>
			<Box 
                bgcolor="red" 
                color="white" 
                textAlign="center"
                 height={100}
            >
                red</Box>
			<Box bgcolor="green" color="white" textAlign="center"  height={100}>green</Box>
			<Box bgcolor="blue"  color="white" textAlign="center" height={100} >blue</Box>
	</Carousel> 
</Playground>

## Position

There are 4 position options available.

<Playground>
         <Carousel autoplay={false}  height={100} dotPosition="top">
			<Box 
                bgcolor="red" 
                color="white" 
                textAlign="center"
                 height={100}
            >
                red</Box>
			<Box bgcolor="green" color="white" textAlign="center"  height={100}>green</Box>
			<Box bgcolor="blue"  color="white" textAlign="center" height={100} >blue</Box>
	</Carousel> 
</Playground>

## Scroll automatically

Timing of scrolling to the next card/picture.

<Playground>
         <Carousel autoplay={true}  height={100}  >
			<Box 
                bgcolor="red" 
                color="white" 
                textAlign="center"
                 height={100}
            >
                red</Box>
			<Box bgcolor="green" color="white" textAlign="center"  height={100}>green</Box>
			<Box bgcolor="blue"  color="white" textAlign="center" height={100} >blue</Box>
	</Carousel> 
</Playground>

## Todo

1. fade in style
2. when dotPosition is left or right ,Carousel should be translateY