Bootstrap React Carousel
Bootstrap React Carousel is a slideshow component for cycling through elements—images or slides of text—like a 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 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#
1<CCarousel>2 <CCarouselItem>3 <CImage className="d-block w-100" src="/images/react.jpg" alt="slide 1" />4 </CCarouselItem>5 <CCarouselItem>6 <CImage className="d-block w-100" src="/images/vue.jpg" alt="slide 2" />7 </CCarouselItem>8 <CCarouselItem>9 <CImage className="d-block w-100" src="/images/angular.jpg" alt="slide 3" />10 </CCarouselItem>11</CCarousel>
With controls#
Adding in the previous and next controls by controls
property.
1<CCarousel controls>2 <CCarouselItem>3 <CImage className="d-block w-100" src="/images/react.jpg" alt="slide 1" />4 </CCarouselItem>5 <CCarouselItem>6 <CImage className="d-block w-100" src="/images/vue.jpg" alt="slide 2" />7 </CCarouselItem>8 <CCarouselItem>9 <CImage className="d-block w-100" src="/images/angular.jpg" alt="slide 3" />10 </CCarouselItem>11</CCarousel>
With indicators#
You can attach the indicators to the carousel, lengthwise the controls, too.
1<CCarousel controls indicators>2 <CCarouselItem>3 <CImage className="d-block w-100" src="/images/react.jpg" alt="slide 1" />4 </CCarouselItem>5 <CCarouselItem>6 <CImage className="d-block w-100" src="/images/vue.jpg" alt="slide 2" />7 </CCarouselItem>8 <CCarouselItem>9 <CImage className="d-block w-100" src="/images/angular.jpg" alt="slide 3" />10 </CCarouselItem>11</CCarousel>
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. We hide them with .d-none
and draw them back on medium-sized devices with .d-md-block
.
1<CCarousel controls indicators>2 <CCarouselItem>3 <CImage className="d-block w-100" src="/images/react.jpg" alt="slide 1" />4 <CCarouselCaption className="d-none d-md-block">5 <h5>First slide label</h5>6 <p>Some representative placeholder content for the first slide.</p>7 </CCarouselCaption>8 </CCarouselItem>9 <CCarouselItem>10 <CImage className="d-block w-100" src="/images/vue.jpg" alt="slide 2" />11 <CCarouselCaption className="d-none d-md-block">12 <h5>Second slide label</h5>13 <p>Some representative placeholder content for the first slide.</p>14 </CCarouselCaption>15 </CCarouselItem>16 <CCarouselItem>17 <CImage className="d-block w-100" src="/images/angular.jpg" alt="slide 3" />18 <CCarouselCaption className="d-none d-md-block">19 <h5>Third slide label</h5>20 <p>Some representative placeholder content for the first slide.</p>21 </CCarouselCaption>22 </CCarouselItem>23</CCarousel>
Crossfade#
Add transition="crossfade"
to your carousel to animate slides with a fade transition instead of a slide.
1<CCarousel controls transition="crossfade">2 <CCarouselItem>3 <CImage className="d-block w-100" src="/images/react.jpg" alt="slide 1" />4 </CCarouselItem>5 <CCarouselItem>6 <CImage className="d-block w-100" src="/images/vue.jpg" alt="slide 2" />7 </CCarouselItem>8 <CCarouselItem>9 <CImage className="d-block w-100" src="/images/angular.jpg" alt="slide 3" />10 </CCarouselItem>11</CCarousel>
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
.
1<CCarousel controls indicators dark>2 <CCarouselItem>3 <CImage className="d-block w-100" src="/images/react.jpg" alt="slide 1" />4 <CCarouselCaption className="d-none d-md-block">5 <h5>First slide label</h5>6 <p>Some representative placeholder content for the first slide.</p>7 </CCarouselCaption>8 </CCarouselItem>9 <CCarouselItem>10 <CImage className="d-block w-100" src="/images/vue.jpg" alt="slide 2" />11 <CCarouselCaption className="d-none d-md-block">12 <h5>Second slide label</h5>13 <p>Some representative placeholder content for the first slide.</p>14 </CCarouselCaption>15 </CCarouselItem>16 <CCarouselItem>17 <CImage className="d-block w-100" src="/images/angular.jpg" alt="slide 3" />18 <CCarouselCaption className="d-none d-md-block">19 <h5>Third slide label</h5>20 <p>Some representative placeholder content for the first slide.</p>21 </CCarouselCaption>22 </CCarouselItem>23</CCarousel>
API#
CCarousel#
1import { CCarousel } from '@coreui/bootstrap-react'2// or3import CCarousel from '@coreui/bootstrap-react/src/components/carousel/CCarousel'
Property | Description | Type | Default |
---|---|---|---|
activeIndex | index of the active item. | number | 0 |
className | A string of all className you want applied to the base component. | string | - |
controls | Adding in the previous and next controls. | boolean | - |
dark | Add darker controls, indicators, and captions. | boolean | - |
indicators | Adding indicators at the bottom of the carousel for each item. | boolean | - |
interval | The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. | number | boolean | 5000 |
onSlid | Callback fired when a slide transition end. | (active: number, direction: string) => void | - |
onSlide | Callback fired when a slide transition starts. | (active: number, direction: string) => void | - |
pause | If set to 'hover', pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it. | boolean | 'hover' | hover |
transition | Set type of the transition. | 'slide' | 'crossfade' | - |
wrap | Set whether the carousel should cycle continuously or have hard stops. | boolean | true |
CCarouselCaption#
1import { CCarouselCaption } from '@coreui/bootstrap-react'2// or3import CCarouselCaption from '@coreui/bootstrap-react/src/components/carousel/CCarouselCaption'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the base component. | string | - |
CCarouselItem#
1import { CCarouselItem } from '@coreui/bootstrap-react'2// or3import CCarouselItem from '@coreui/bootstrap-react/src/components/carousel/CCarouselItem'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the base component. | string | - |
interval | The amount of time to delay between automatically cycling an item. | number | boolean | false |