Carousel

React carousel is a slideshow component for cycling through elements.

Usage

Example

Slide 1

Slide 2

Slide 3

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	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
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	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