🤩
Windframe Import update is finally here!

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} ... />

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast