Search...

Carousel

React Bootstrap 5 Carousel

React Bootstrap 5 Carousel allows us to create a carousel for our photos or text slides that is shown in a cyclic fashion. The carousel is a slideshow that allows you to cycle between a number of different pieces of content. It can be used with a collection of photos, text, or custom markup. The previous and next controls and indicators are also supported.

Importing the React Bootstrap 5 Carousel Component

You begin by importing 'CDBCarousel' into your project to use the Contrast React Bootstrap 5 Carousel component.

js
import { CDBCarousel } from 'cdbreact';

Default Carousel

React Bootstrap 5 Carousel

js
import React from 'react';
import { CDBCarousel, CDBCarouselItem, CDBCarouselInner, CDBView, CDBContainer } from 'cdbreact';
export const Carousel = () => {
return (
<CDBContainer>
<CDBContainer>
<CDBCarousel
activeItem={1}
length={3}
showControls={true}
showIndicators={true}
className="z-depth-1"
slide
>
<CDBCarouselInner>
<CDBCarouselItem itemId="1">
<CDBView>
<img className="d-block w-100" src="https://imgur.com/oPU7JbX" alt="First slide" />
</CDBView>
</CDBCarouselItem>
<CDBCarouselItem itemId="2">
<CDBView>
<img className="d-block w-100" src="https://imgur.com/EgVSItY" alt="Second slide" />
</CDBView>
</CDBCarouselItem>
<CDBCarouselItem itemId="3">
<CDBView>
<img className="d-block w-100" src="https://imgur.com/c1aFo29" alt="Third slide" />
</CDBView>
</CDBCarouselItem>
</CDBCarouselInner>
</CDBCarousel>
</CDBContainer>
</CDBContainer>
);
};

## API Reference

This section will expand on the props you'll be able to use with the Contrast React Bootstrap 5 Card component. You'll learn what these props do, how to utilize them, and what their default values are.

API Reference: Contrast React Bootstrap 5 Carousel Properties

Other prop options for the CDBCarousel component are included in the table below.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBCarousel className="myClass" ... />
activeItemNumberThe index of default active item<CDBCarousel activeItem={1} ... />
intervalNumber or Boolean6000Time in milliseconds between slides changes<CDBCarousel interval={10000} ... />
lengthNumberIndicates amount of slides in the carousel<CDBCarousel length={3} ... />
tagfunction or StringdivChanges default html tag<CDBCarousel tag="div" ... />
mobileGestureBooleantrueSwitches on/off carousel mobile gesture.<CDBCarousel mobileGesture={false} .../>
multiItemBooleanfalseSwitches multiItem mode - more items in one view, changed controls<CDBCarousel multiItem={true} .../>
onHoverStopBooleantrueStops the changing slide when mouse is on the element of the carousel<CDBCarousel onHoverStop={false} .../>
showControlsBooleantrueSwitches on/off carousel controls<CDBCarousel showControls={false} .../>
showIndicatorsBooleantrueSwitches on/off carousel indicators<CDBCarousel showIndicators={false} .../>
slideBooleanfalseSwitches slide styles of carousel<CDBCarousel slide .../>
testimonialBooleanfalseSets black, bigger control arrows for testimonial carousels<CDBCarousel testimonial .../>
thumbnailsBooleanfalseReplaces simple dot indicators with miniature slides pictures<CDBCarousel thumbnails .../>

API Reference: Contrast React Bootstrap 5 Carousel Caption Properties

Other 'CDBControl' component prop alternatives are included in the table below.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBCarouselCaption className="myClass" ... />
tagfunction or StringdivChanges default html tag<CDBCarouselCaption tag="div" ... />

API Reference: Contrast React Bootstrap 5 Carousel Controls Properties

The table below lists other prop options of the CDBControl component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBControl className="myClass" ... />
directionStringSpecifies the slide direction. Can either be prev or next.<CDBControl direction="prev" ... />
iconLeftBooleanToggles left Icon's visibility<CDBControl IconLeft ... />
iconRightBooleanToggles right Icon's visibility<CDBControl IconRight ... />
onClickAnyperforms an action when clicked<CDBControl onClick={handleClick} ... />
tagfunction or StringdivChanges default html tag<CDBControl tag="div" ... />
multiItemBooleanfalseSwitches multiItem mode - more items in one view, changed controls<CDBCarousel multiItem={true} .../>
testimonialBooleanfalseSets black, bigger control arrows for testimonial carousels<CDBCarousel testimonial .../>

API Reference: Contrast React Bootstrap 5 Carousel Indicator Properties

The table below lists other prop options of the CDBCarouselIndicators component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBCarouselIndicator className="myClass" ... />
activeBooleanSet as active item indicator<CDBCarouselIndicator active ... />
altString"Carousel thumbnail"Sets the alternate when image is yet to load<CDBCarouselIndicator alt="Carousel thumbnail" ... />
imgStringProvides the Carousel thumbnail<CDBCarouselIndicator img="img_url" ... />

API Reference: Contrast React Bootstrap 5 Carousel Indicators Properties

The table below lists other prop options of the CDBCarouselIndicators component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBCarouselIndicators className="myClass" ... />

API Reference: Contrast React Bootstrap 5 Carousel Inner Properties

The table below lists other prop options of the CDBCarouselInner component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBCarouselInner className="myClass" ... />
activeBooleanSet as active item<CDBCarouselInner active ... />
tagfunction or StringdivChanges default html tag<CDBCarouselInner tag="div" ... />

API Reference: Contrast React Bootstrap 5 Carousel Item Properties

The table below lists other prop options of the CDBCarouselItem component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBCarouselItem className="myClass" ... />
activeBooleanSet as active item<CDBCarouselItem active ... />
tagfunction or StringdivChanges default html tag<CDBCarouselItem tag="div" ... />
itemIdNumberThe index of item in carousel<CDBCarouselItem itemId={1} ... />

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.