<p dir="auto">In the <a href="http://getbootstrap.com/javascript/#carousel" rel="nofollow">Carousel documentation</a>, there is the following Usage example:</p>
<h2 dir="auto">Usage</h2>
<h3 dir="auto">Multiple carousels</h3>
<p dir="auto">Carousels require the use of an <strong>id</strong> on the outermost container, <strong>.carousel</strong>, for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's id, be sure to update the relevant controls.</p>
<hr>
<h4 dir="auto">Proposed Fix</h4>
<p dir="auto">The places where it says <strong>id</strong> should be replaced with <strong>class</strong> or the <strong>.carousel</strong> should be an id selector instead.</p>
<hr>
<p dir="auto">There is also the following example that shows an active class on the first and only carousel item,</p>
<h2 dir="auto">Examples</h2>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;!-- Wrapper for slides --&gt;
  &lt;div class=&quot;carousel-inner&quot;&gt;
    &lt;div class=&quot;item active&quot;&gt;
      &lt;img src=&quot;...&quot; alt=&quot;...&quot;&gt;
      &lt;div class=&quot;carousel-caption&quot;&gt;
        ...
      &lt;/div&gt;
    &lt;/div&gt;
    ...
  &lt;/div&gt;"><pre class="notranslate"><span class="pl-c">&lt;!-- Wrapper for slides --&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">carousel-inner</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">item active</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">img</span> <span class="pl-c1">src</span>="<span class="pl-s">...</span>" <span class="pl-c1">alt</span>="<span class="pl-s">...</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">carousel-caption</span>"<span class="pl-kos">&gt;</span>
        ...
      <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    ...
  <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">The problem with this is that if you duplicate the <code class="notranslate">div.item</code> element with the <code class="notranslate">active</code> class, having <code class="notranslate">active</code> on multiple items will break the carousel and prevent it from moving left or right.</p>
<hr>
<h4 dir="auto">Proposed Fix</h4>
<p dir="auto">Change the example to</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;!-- Wrapper for slides --&gt;
  &lt;div class=&quot;carousel-inner&quot;&gt;
    &lt;div class=&quot;item active&quot;&gt; &lt;!-- First visible carousel item --&gt;
      &lt;img src=&quot;...&quot; alt=&quot;...&quot;&gt;
      &lt;div class=&quot;carousel-caption&quot;&gt;
        ...
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;item&quot;&gt;
      &lt;img src=&quot;...&quot; alt=&quot;...&quot;&gt;
      &lt;div class=&quot;carousel-caption&quot;&gt;
        ...
      &lt;/div&gt;
    &lt;/div&gt;
    ...
  &lt;/div&gt;"><pre class="notranslate"><span class="pl-c">&lt;!-- Wrapper for slides --&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">carousel-inner</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">item active</span>"<span class="pl-kos">&gt;</span> <span class="pl-c">&lt;!-- First visible carousel item --&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">img</span> <span class="pl-c1">src</span>="<span class="pl-s">...</span>" <span class="pl-c1">alt</span>="<span class="pl-s">...</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">carousel-caption</span>"<span class="pl-kos">&gt;</span>
        ...
      <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">item</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">img</span> <span class="pl-c1">src</span>="<span class="pl-s">...</span>" <span class="pl-c1">alt</span>="<span class="pl-s">...</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">carousel-caption</span>"<span class="pl-kos">&gt;</span>
        ...
      <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    ...
  <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">I spent a good half-hour trying to fix an issue which was a direct action of using the example code provided.<br>
<a href="http://getbootstrap.com/javascript/#carousel" rel="nofollow">http://getbootstrap.com/javascript/#carousel</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  &lt;!-- Wrapper for slides --&gt;
  &lt;div class=&quot;carousel-inner&quot;&gt;
    &lt;div class=&quot;item active&quot;&gt;
      &lt;img src=&quot;...&quot; alt=&quot;...&quot;&gt;
      &lt;div class=&quot;carousel-caption&quot;&gt;
        ...
      &lt;/div&gt;
    &lt;/div&gt;
    ...
  &lt;/div&gt;"><pre class="notranslate"><code class="notranslate">  &lt;!-- Wrapper for slides --&gt;
  &lt;div class="carousel-inner"&gt;
    &lt;div class="item active"&gt;
      &lt;img src="..." alt="..."&gt;
      &lt;div class="carousel-caption"&gt;
        ...
      &lt;/div&gt;
    &lt;/div&gt;
    ...
  &lt;/div&gt;
</code></pre></div>
<p dir="auto">It might just be my stupid mistake but I copied the item again <strong>with</strong> the <em>active</em> class, therefore the images were stacked and I thought the plugin was not working etc.</p>
<p dir="auto">So the resolve might be to indicate <em>active</em> only needs to be on the first item.</p>