W3cubDocs

Carousels

A slideshow component for cycling through elements—images or slides of text—like a carousel.

Example

Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they’re not explicitly required. Add and customize as you see fit.

<Carousel>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="holder.js/800x400?text=First slide&bg=373940"
      alt="First slide"
    />
    <Carousel.Caption>
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="holder.js/800x400?text=Second slide&bg=282c34"
      alt="Second slide"
    />

    <Carousel.Caption>
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="holder.js/800x400?text=Third slide&bg=20232a"
      alt="Third slide"
    />

    <Carousel.Caption>
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </Carousel.Caption>
  </Carousel.Item>
</Carousel>

Controlled

You can also control the Carousel state, via the activeIndex prop and onSelect handler.

function ControlledCarousel() {
  const [index, setIndex] = useState(0);

  const handleSelect = (selectedIndex, e) => {
    setIndex(selectedIndex);
  };

  return (
    <Carousel activeIndex={index} onSelect={handleSelect}>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="holder.js/800x400?text=First slide&bg=373940"
          alt="First slide"
        />
        <Carousel.Caption>
          <h3>First slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="holder.js/800x400?text=Second slide&bg=282c34"
          alt="Second slide"
        />

        <Carousel.Caption>
          <h3>Second slide label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="holder.js/800x400?text=Third slide&bg=20232a"
          alt="Third slide"
        />

        <Carousel.Caption>
          <h3>Third slide label</h3>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
          </p>
        </Carousel.Caption>
      </Carousel.Item>
    </Carousel>
  );
}

render(<ControlledCarousel />);

Individual Item Intervals

You can specify individual intervals for each carousel item via the interval prop.

<Carousel>
  <Carousel.Item interval={1000}>
    <img
      className="d-block w-100"
      src="holder.js/800x400?text=First slide&bg=373940"
      alt="First slide"
    />
    <Carousel.Caption>
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item interval={500}>
    <img
      className="d-block w-100"
      src="holder.js/800x400?text=Second slide&bg=282c34"
      alt="Second slide"
    />
    <Carousel.Caption>
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="holder.js/800x400?text=Third slide&bg=20232a"
      alt="Third slide"
    />
    <Carousel.Caption>
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </Carousel.Caption>
  </Carousel.Item>
</Carousel>

API

Carousel

import Carousel from 'react-bootstrap/Carousel'

Name	Type	Default	Description
activeIndex	number		controlled by: `onSelect`, initial prop: `defaultActiveindex` Controls the current visible slide
as	elementType		You can use a custom element type for this component.
controls	boolean	`true`	Show the Carousel previous and next arrows for changing the current slide
defaultActiveIndex	number	`0`
fade	boolean	`false`	Cross fade slides instead of the default slide animation
indicators	boolean	`true`	Show a set of slide position indicators
interval	number	`5000`	The amount of time to delay between automatically cycling an item. If `null`, carousel will not automatically cycle.
keyboard	boolean	`true`	Whether the carousel should react to keyboard events.
nextIcon	node	`<span aria-hidden="true" className="carousel-control-next-icon" />`	Override the default button icon for the "next" control
nextLabel	string	`'Next'`	Label shown to screen readers only, can be used to show the next element in the carousel. Set to null to deactivate.
onSelect	function		controls `activeIndex` Callback fired when the active item changes. `(eventKey: number, event: Object \| null) => void`
onSlid	function		Callback fired when a slide transition ends. `(eventKey: number, direction: 'left' \| 'right') => void`
onSlide	function		Callback fired when a slide transition starts. `(eventKey: number, direction: 'left' \| 'right') => void`
pause	`'hover'` \| `false`	`'hover'`	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. On touch-enabled devices, when set to `"hover"`, cycling will pause on `touchend` (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.
prevIcon	node	`<span aria-hidden="true" className="carousel-control-prev-icon" />`	Override the default button icon for the "previous" control
prevLabel	string	`'Previous'`	Label shown to screen readers only, can be used to show the previous element in the carousel. Set to null to deactivate.
ref	React.Ref<CarouselRef>
slide	boolean	`true`	Enables animation on the Carousel as it transitions between slides.
touch	boolean	`true`	Whether the carousel should support left/right swipe interactions on touchscreen devices.
wrap	boolean	`true`	Whether the carousel should cycle continuously or have hard stops.
bsPrefix	string	`'carousel'`	Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

Carousel.Item

import Carousel from 'react-bootstrap/Carousel'

Name	Type	Default	Description
as	elementType	`<div>`	Set a custom element for this component
interval	number		The amount of time to delay between automatically cycling this specific item. Will default to the Carousel's `interval` prop value if none is specified.
bsPrefix	string	`'carousel-item'`	Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

Carousel.Caption

import Carousel from 'react-bootstrap/Carousel'

Name	Type	Default	Description
as	elementType	`<div>`	You can use a custom element type for this component.
bsPrefix required	string	`'carousel-caption'`	Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

© 2014–present Stephen J. Collings, Matthew Honnibal, Pieter Vanderwerff
Licensed under the MIT License (MIT).
https://react-bootstrap.github.io/components/carousel/