title: Bootstrap: data-slide-to index with multiple carousel
body: <p>I have created multiple carousels on one page. These carousels have unique ids and thumbnail links which all have the <code>data-slide-to</code> attribute.</p>
  
  <p>The problem is, that Bootstrap create an item index over ALL carousels. For example the first carousels has data-slide-to from index 0 to 7, the second carousel the data-slide-to starts with 8.</p>
  
  <p>How to renew the index for every carousel.</p>
  
  <p>I tried to initialize every carousel with specific JS call, and via the data- attribute, same issue.</p>
  
  <pre><code>&lt;div id="carouselIdx_6" class="carousel" data-ride="carousel"&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;
          &lt;div class="item active"&gt;&lt;a href="/assets/…"&gt;&lt;img src="/assets/…"&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;a href="/assets/…"&gt;&lt;img src="/…"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;ol class="indicator-small carousel-indicators"&gt;
          &lt;li data-target="#carouselIdx_6" data-slide-to="0" class="active"&gt;&lt;img class="" src="/assets/…"&gt;&lt;/li&gt;
          &lt;li data-target="#carouselIdx_6" data-slide-to="1"&gt;&lt;img class="" src="/assets/…"&gt;&lt;/li&gt;
      &lt;/ol&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div id="carouselIdx_7" class="carousel" data-ride="carousel"&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;
          &lt;div class="item active"&gt;&lt;a href="/assets/…"&gt;&lt;img src="/assets/…"&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;a href="/assets/…"&gt;&lt;img src="/…"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;ol class="indicator-small carousel-indicators"&gt;
          &lt;li data-target="#carouselIdx_7" data-slide-to="2" class="active"&gt;&lt;img class="" src="/assets/…"&gt;&lt;/li&gt;
          &lt;li data-target="#carouselIdx_7" data-slide-to="3"&gt;&lt;img class="" src="/assets/…"&gt;&lt;/li&gt;
      &lt;/ol&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>