This story is not configured to handle controls. Learn how to add controls
| Name | Description | Default | Control |
|---|---|---|---|
| children* | the content of the component ReactNode | - | - |
| duration | The time it takes (milliseconds) before next transition starts number | 5000 | - |
| transitionDuration | Determines how long the transition takes number | 1000 | - |
| defaultIndex | Specifies the first slide to display number | 0 | - |
| indicators | For specifying if there should be dots below the slideshow. If function; it will render the returned element boolean | ((index?: number) => ReactNode) | false | - |
| prevArrow | A custom element to serve as previous arrow ReactElement<any, string | JSXElementConstructor<any>> | - | - |
| nextArrow | A custom element to serve as next arrow ReactElement<any, string | JSXElementConstructor<any>> | - | - |
| arrows | Determines if there should be a navigational arrow for going to the next or previous slide boolean | true | - |
| autoplay | Responsible for determining if the slideshow should start automatically boolean | true | - |
| infinite | Specifies if the transition should loop infinitely boolean | true | - |
| pauseOnHover | Determines whether the transition effect applies when the mouse hovers the slider boolean | true | - |
| canSwipe | Determines whether the user can go to next or previous slide by the mouse or by touching boolean | true | - |
| easing | The timing transition function to use. You can use one of linear, ease, ease-in, ease-out, cubic, cubic-in, cubic-out string | "linear" | - |
| cssClass | Use this prop to add your custom css to the wrapper containing the sliders. Pass your css className as value for the cssClass prop string | "" | - |
| onStartChange | Callback that gets triggered at the start of every transition. The oldIndex and newIndex are passed as arguments ((from: number, to: number) => void) | - | - |
| onChange | Callback that gets triggered at the end of every transition. The oldIndex and newIndex are passed as arguments ((from: number, to: number) => void) | - | - |
| scale* | Required when using zoom to specify the scale the current slide should be zoomed to. A number greater than 1 indicates zoom in. A number less than 1, indicates zoom out number | - | - |