Carousel
React carousel is a slideshow component for cycling through elements.
Usage
Example
Script
//slides=[]... const [activeIndex, setActiveIndex] = useState(0) return ( <div> <CRow> <CCol sm={12}> <CCarousel activeIndex={activeIndex}> <CCarouselIndicators/> <CCarouselInner> <CCarouselItem> <img className="d-block w-100" src={slides[0]} alt="slide 1"/> <CCarouselCaption><h3>Slide 1</h3><p>Slide 1</p></CCarouselCaption> </CCarouselItem> <CCarouselItem> <img className="d-block w-100" src={slides[1]} alt="slide 2"/> <CCarouselCaption><h3>Slide 2</h3><p>Slide 2</p></CCarouselCaption> </CCarouselItem> <CCarouselItem> <img className="d-block w-100" src={slides[2]} alt="slide 3"/> <CCarouselCaption><h3>Slide 3</h3><p>Slide 3</p></CCarouselCaption> </CCarouselItem> </CCarouselInner> <CCarouselControl direction="prev"/> <CCarouselControl direction="next"/> </CCarousel> </CCol> </CRow> </div> )# Features
- Slides to next item in intervals
- Item could be an image or other content
- Controlled by arrows and indicators
# Carousel API
| Name | Required | Type | Default Value |
|---|---|---|---|
| className | string | ||
| user classes for the main HTML tag | |||
| children | any[] | ||
| children components | |||
| innerRef | (object | Function | string) | ||
| ref to the main tag | |||
| activeIndex | number | 0 | |
| index of the active item | |||
| autoSlide | number | ||
| slide starts on beginning | |||
| animate | boolean | ||
| set animate variable for created context | |||
| onSlideChange | Function | ||
| on state change callback | |||
Context
- creates own context
CarouselCaption
# CarouselCaption API
| Name | Required | Type | Default Value |
|---|---|---|---|
| className | string | ||
| user classes for the main HTML tag | |||
| innerRef | (object | Function | string) | ||
| ref to the main tag | |||
CarouselControl
# CarouselControl API
| Name | Required | Type | Default Value |
|---|---|---|---|
| className | string | ||
| user classes for the main HTML tag | |||
| children | any | ||
| children components | |||
| innerRef | (object | Function | string) | ||
| ref to the main tag | |||
| direction | true | (prev | next) | |
| moving direction | |||
CarouselIndicators
# CarouselIndicators API
| Name | Required | Type | Default Value |
|---|---|---|---|
| className | string | ||
| user classes for the main HTML tag | |||
| innerRef | (object | Function | string) | ||
| ref to the main tag | |||
| indicatorsClass | string | carousel-indicators | |
| indicators user classes | |||
CarouselInner
# CarouselInner API
| Name | Required | Type | Default Value |
|---|---|---|---|
| className | string | ||
| user classes for the main HTML tag | |||
| innerRef | (object | Function | string) | ||
| ref to the main tag | |||
CarouselItem
# CarouselItem API
| Name | Required | Type | Default Value |
|---|---|---|---|
| children | any | ||
| children components | |||
| className | string | ||
| user classes for the main HTML tag | |||
| innerRef | (object | Function | string) | ||
| ref to the main tag | |||