Carousel - Keep React
Table of Contents#
- Default Carousel
- Static Carousel
- Carousel With Text Control
- Carousel With Custom Control Icon
- Carousel With Indicator
- Multiple Carousel
- API Reference
- Reference
Default Carousel#
Default Carousel component allows you to display a series of images, content, or media items in a rotating manner. It is often used to showcase multiple items in a limited space, allowing users to view different items by sliding or swiping through them.
Static Carousel#
A Static Carousel is a type of carousel component that displays a sequence of items without providing any indicators or navigation controls for users to manually switch between items. Instead, the items in a static carousel automatically transition or scroll to the next item at a predefined interval.
Carousel With Text Control#
A Carousel with Text Control is a carousel component that includes textual navigation controls, typically in the form of Next and Previous buttons.
Carousel With Custom Control Icon#
A Carousel with Custom Control Icons is a carousel component that provides navigation controls with customized icons for moving between items. By using leftControl and rightControl props, we can add custom controls.
Carousel With Indicator#
The IndicatorsType prop allows you to choose from different types of indicators. By using indicatorsType props as dots, rings, bars, squares, or squareRing, based on your design preferences.
Multiple Carousel#
A Multiple Carousel is a user interface component that allows you to display multiple carousels on a single page or screen.
API Reference#
Explore the available props for the carousel component
| Property | Description | Type | Default |
|---|---|---|---|
| indicators | Whether to display indicators for carousel items. | boolean | false |
| showControls | Whether to display navigation controls (Next/Previous). | boolean | true |
| leftControl | Custom ReactNode to be used as the left navigation control. | ReactNode | Icon |
| rightControl | Custom ReactNode to be used as the right navigation control. | ReactNode | Icon |
| slide | Whether to enable automatic sliding of carousel items. | boolean | false |
| slideInterval | Interval in milliseconds for automatic slide transitions. | number | 500 |
| indicatorsType | Type of indicators to display. | dot ring bar square squareRing | dot |
| indicatorsTypeColors | Color variant for the indicators based on the selected type. | white slate | white |
Reference#
To learn more about the Carousel, please see the documentation of Carousel