E041

E041

.carousel-inner must have exactly one .item.active child.

As stated in the Bootstrap documentation, for the Carousel plugin to work properly, it requires there to be one initially-active Carousel slide, which is to say that exactly one of the Carousel's .items must have the .active class. This also means that all Carousels must contain at least one slide (i.e. at least one .item); zero-slide Carousels are invalid and won't work properly.

Note that the active slide is not required to be the first Carousel slide, although this is normally the case.

Wrong:

<div class="carousel-inner" role="listbox">
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

Right:

<div class="carousel-inner" role="listbox">
  <div class="item active">...</div>
  <div class="item">...</div>
  ...
</div>

.carousel must have exactly one .carousel-inner child.

A .carousel must have exactly one .carousel-inner to house its slides.

Wrong:

<div id="carousel-example-generic" class="carousel slide">
  <ol class="carousel-indicators">...</ol>

  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Also Wrong:

<div id="carousel-example-generic" class="carousel slide">
  <ol class="carousel-indicators">...</ol>

  <div class="carousel-inner" role="listbox">
    ...
  </div>
  <div class="carousel-inner" role="listbox">
    ...
  </div>

  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Right:

<div id="carousel-example-generic" class="carousel slide">
  <ol class="carousel-indicators">...</ol>

  <div class="carousel-inner" role="listbox">
    ...
  </div>

  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>