Carousel

Carousel is responsive and interactive slideshow which is created for presenting content, especially images and videos.

The carousel is a slideshow for cycling through a series of content. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

Example

Default Carousel example.

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

In this section you will find advanced information about the Carousel component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Contrast Carousel Import Statement

You need to import the Contrast Carousel component and any other proper modules first before using it.

import { CDBCarousel, CDBCarouselItem, CDBCarouselCaption, CDBCarouselInner, CDBView, CDBCarouselIndicator, CDBCarouselIndicators, CDBControl, CDBContainer } from "cdbreact";

API Reference: Contrast Carousel Properties

The table below shows the configuration options of the CDBCarousel component.

API Reference: Contrast Carousel Caption Properties

The table below shows the configuration options of the CDBCarouselCaption component.

API Reference: Contrast Carousel Controls Properties

The table below shows the configuration options of the CDBControl component.

API Reference: Contrast Carousel Indicator Properties

The table below shows the configuration options of the CDBCarouselIndicator component.

API Reference: Contrast Carousel Indicators Properties

The table below shows the configuration options of the CDBCarouselIndicators component.

API Reference: Contrast Carousel Inner Properties

The table below shows the configuration options of the CDBCarouselInner component.

API Reference: Contrast Carousel Item Properties

The table below shows the configuration options of the CDBCarouselItem component.