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
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.
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
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
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
squareRing, based on your design preferences.
A Multiple Carousel is a user interface component that allows you to display multiple carousels on a single page or screen.
Explore the available props for the carousel component
|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.|
|indicatorsTypeColors||Color variant for the indicators based on the selected type.|
|className||Custom class to be added to the carousel.||string||None|
To learn more about the Carousel, please see the documentation of Carousel