Bootstrap 4 Carousel

Add scrolling images or text to your website with the Bootstrap carousel component.

The Bootstrap carousel component enables you to add scrolling images and text that slide in, pause, then slide out. Controls enable the user to scroll forwards or backwards within the set. Basically a scrolling marquee with user controls.

<div id="myCarousel" class="carousel slide w-50 ml-auto mr-auto" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block w-100" src="/pix/samples/27m.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="/pix/samples/28m.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="/pix/samples/30m.jpg" alt="Third slide">
    </div>
  </div>
</div>

Explanation

To create a basic carousel:

Apply .carousel and .slide to an outer container (with its own ID).
For the scrollable contents, wrap all items in a .carousel-inner and give each item a .carousel-item class.
Also, you must apply .active to one of the slides in the carousel, otherwise the carousel won't be visible. This class allows you to set one slide as the initial slide (i.e. the starting slide).

Add Controls

To add "Previous/Next" controls, use an <a> with .carousel-control-prev or carousel-control-next. Also add a <span> with .carousel-control-prev-icon or .carousel-control-next-icon.

To cater for screenreaders, add <span>s with the words "Previous" or "Next" and give them the .sr-only class. This will hide this text from browsers, but read out the text in screenreaders.

<div id="myCarousel" class="carousel slide bg-inverse w-50 ml-auto mr-auto" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block w-100" src="/pix/samples/30m.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="/pix/samples/28m.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="/pix/samples/27m.jpg" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Carousel Sizing

Note that in these examples I've added some extra Bootstrap classes in order to size the images and center the carousel.

In particular, I've added w-50 ml-auto mr-auto to the carousel, and w-100 to the images.

This gives the carousel a width of 50% and a left and right margin of auto. The images get a width of 100% (i.e. 100 percent of the width of the carousel).

When I don't do this, the controls can fall outside the image and become invisible due to the width of the image being narrower than the carousel itself, and the controls and the background both being white (i.e. white on white).

So, if you find that you can't see the controls on your carousel, check that they're not falling outside of the image. Whether you need to resize the image and/or carousel will depend on your images and the context with which they're being displayed.

Add Indicators

To add "indicator" controls (the little clickable areas at the bottom, center), add a list with .carousel-indicators, as well as the applicable .data-target and .data-slide-to attributes.

<div id="myCarousel" class="carousel slide bg-inverse w-50 ml-auto mr-auto" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block w-100" src="/pix/samples/23m.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="/pix/samples/22m.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="/pix/samples/32m.jpg" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Captions

You can add captions to your slideshow by adding a <div> with the .carousel-caption class applied. This goes inside each .carousel-item.

<div id="myCarousel" class="carousel slide bg-inverse w-50 ml-auto mr-auto" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block w-100" src="/pix/samples/22m.jpg" alt="First slide">
        <div class="carousel-caption">
          <h3>First slide</h3>
          <p>This is the first slide.</p>
        </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="/pix/samples/23m.jpg" alt="Second slide">
        <div class="carousel-caption">
          <h3>Second slide</h3>
          <p>This is the second slide.</p>
        </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="/pix/samples/26m.jpg" alt="Third slide">
        <div class="carousel-caption">
          <h3>Third slide</h3>
          <p>This is the third slide.</p>
        </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Bootstrap 4 vs Bootstrap 3

Bootstrap 3 uses .item for each carousel item.

Bootstrap 4 uses .carousel-item for each carousel item.