Skip to main content

Carousel

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

How it works

  • The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup.
  • Includes support for previous/next controls, indicators, and captions.
  • Swipe gestures work on touch devices out of the box.
  • The carousel pauses on hover and when the user taps it.

Slideshow

Add data-boodoo-ride="carousel" to auto-play, and optional data-boodoo-interval (ms) to control the timing.

<div id="carouselExample" class="carousel slide" data-boodoo-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">...</div>
    <div class="carousel-item">...</div>
    <div class="carousel-item">...</div>
  </div>
  <button class="carousel-control-prev" type="button" data-boodoo-slide="prev">
    <span class="carousel-control-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-boodoo-slide="next">
    <span class="carousel-control-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
  <div class="carousel-indicators">
    <button type="button" data-boodoo-slide-to="0" class="active"></button>
    <button type="button" data-boodoo-slide-to="1"></button>
  </div>
</div>

Crossfade

Add .carousel-fade to animate slides with a fade transition instead of a slide.

<div id="myCarousel" class="carousel slide carousel-fade" data-boodoo-ride="carousel">
  ...
</div>

Dark variant

Add .carousel-dark to the control, indicators, and captions for use on light backgrounds.

Touch swipe

Carousels support horizontal swipe on touch devices by default. Add .carousel-touch to change the cursor to a grab cursor on desktop for a clearer affordance.