Carousel - Keep React

A Carousel component is a user interface element commonly found in web and mobile applications that 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.

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.

1

2

3

4

5

Carousel With Loop#

Carousel with loop option for slide items.

1

2

3

4

5

SlidesToScroll#

The number of slides to scroll at a time.

1

2

3

4

5

Auto Play Plugin#

Auto play carousel slides. We are using embla-carousel-autoplay package to automatically play carousel slides. If you want this functionality then you need to install the embla-carousel-autoplay package.

1

2

3

4

5

ClassNames Plugin#

Style slide items with a custom class. We are using embla-carousel-class-names package to add className. If you want this functionality then you need to install the embla-carousel-class-names package.

API Reference#

Explore the available props for the carousel component

Property	Description	Type	Default
options	Embla carousel options.	EmblaOptionsType	{}
plugins	Embla carousel plugins for adding more variants.	EmblaPluginType[]	None
carouselViewportClasses	Customize the viewport of the carousel container	String	''

Reference#

To learn more about the Carousel, please see the documentation of Carousel

Edit this page Checkbox