React Bootstrap Carousels

The Carousel is one of the finest web components to make the web page look attractive and provide an eye-catching user experience. We can create slideshows for the banners and other sections by cycling through the multiple elements.

The carousels are also useful for creating image galleries, slides of text, etc. However, the functionality behind the Carousel requires an expert level of JavaScript, but Bootstrap allows us to use it in no time. We can create a Bootstrap Carousel in a React application using the Carousel component without specifying any JavaScript.

The Script required for sliding the items is packaged with the Carousel component.

However, the Carousel items do not normalize slide dimensions. We must manually define the appropriate size by utilizing a few additional utilities and custom styles. The previous/next controls do not need to be explicitly defined; instead, we can have them with the Carousel component. However, we need to customize the indicators' styles to make them more specific.

Nested Carousels are not supported by Bootstrap.

Let's understand how to use React Bootstrap carousel for making a slideshow:

How to Create a Carousel in React using Bootstrap?

React Bootstrap supports a <Carousel> component to create the carousel sliders. We have <Carousel>,<Carousel.Item> components for specifying the carousel items.

The <Carousel.Item> component is used inside the <Carousel> component.

To import the carousel component, write the below import statement at the top of the page component:

Consider the below example:

App.js:

Output:

From the above output, we have created a three-item carousel component by using the bootstrap carousel component. We can customize the image's height and width by applying the required CSS.

Controlling the Carousel State

The carousel state can be controlled by using the activeIndex prop by triggering an onSelect handler.

Consider the below example:

App.js:

Output:

From the above output, we are controlling the carousel state by explicitly defining an onSelect handler.

Animate Slides

We can specify the fade prop to apply a fade transition to the slides instead of a swap transition. Consider the below example:

App.js:

From the above example, the sliding animation will be updated. It will slide items with a fade transition.

Specifying the Auto Slide Interval

React Bootstrap carousel component provides an interval prop to adjust the slide time duration. We can specify the interval prop values in mili seconds. Consider the below example:

The above example will slide the carousel item with an interval of 5s.

Dark Variant Carousel

We can create darker controls, captions, and indicators without defining any custom CSS by defining the variant prop in the Carousel component.

To create a dark variant prop, pass the variant="dark" value in the carousel component.

Consider the below example:

Output:

The above output shows that all the caption texts, indicators, and controls are now displayed in dark colour.

Thus, we can easily use the react-bootstrap Carousel with different customizations.