---
title: React Carousel Component
name: Carousel
description: React carousel is a slideshow component for cycling through elements—images or slides of text—like a carousel.
route: /components/carousel/
other_frameworks: carousel
---

## How it works

The React carousel is a slideshow for cycling within a group of content. It runs with a group of images, text, or html elements. It also incorporates support for previous/next buttons.

In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).

## Example

Carousels don't automatically normalize slide dimensions. As such, you may want to use extra utilities or custom methods to properly size content. While carousels support previous/next controls and indicators, they're not explicitly expected. Add and customize as you see fit.

### Slides only

<ExampleSnippet component="CarouselSlidesOnlyExample" componentName="React Carousel" />

### With controls

Adding in the previous and next controls by `controls` property.

<ExampleSnippet component="CarouselWithControlsExample" componentName="React Carousel" />

### With indicators

You can attach the indicators to the carousel, lengthwise the controls, too.

<ExampleSnippet component="CarouselWithIndicatorsExample" componentName="React Carousel" />

### With captions

You can add captions to slides with the `<CCarouselCaption>` element within any `<CCarouselItem>`. They can be immediately hidden on smaller viewports, as shown below, with optional [display utilities](https://coreui.io/4.0/utilities/display). We hide them with `.d-none` and draw them back on medium-sized devices with `.d-md-block`.

<ExampleSnippet component="CarouselWithCaptionsExample" componentName="React Carousel" />

### Crossfade

Add `transition="crossfade"` to your carousel to animate slides with a fade transition instead of a slide.

<ExampleSnippet component="CarouselCrossfadeExample" componentName="React Carousel" />

## Dark variant

Add `dark` property to the `CCarousel` for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the `filter` CSS property. Captions and controls have additional Sass variables that customize the `color` and `background-color`.

<ExampleSnippet component="CarouselDarkVariantExample" componentName="React Carousel" />

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CCarousel /&gt;](./api/#ccarousel)
- [&lt;CCarouselCaption /&gt;](./api/#ccarouselcaption)
- [&lt;CCarouselItem /&gt;](./api/#ccarouselitem)
