title: Multiple bootstrap carousels same page
body: <p>Currently I have 3 bootstrap carousels on one page.</p>
  <p><strong>They are being generated by a php loop that I don't have any control of so the <code>id</code> is always starts off at <code>carousel</code>.</strong></p>
  <p>so the problem I am running into is that all the carousels start off with the <code>id=&quot;#carousel-1&quot;</code> and control <code>href=&quot;#carousel-1&quot;</code></p>
  <p>Of course this doesnt work as all the carousels will just scroll the first carousel i realize this wont work so I figured adding</p>
  <pre><code>$('.second-block #carousel').attr(&quot;id&quot;,&quot;#carousel-2&quot;).find('.controls a').attr(&quot;href&quot;,&quot;#carousel-2&quot;);
  $('.fourth-block #carousel').attr(&quot;id&quot;,&quot;#carousel-3&quot;).find('.controls a').attr(&quot;href&quot;,&quot;#carousel-3&quot;);
  </code></pre>
  <p>This jquery would fix the problem as it changes the <code>id</code>'s of the other carousels to their own but unfortunately this still is only sliding carousel number one. Any ideas?</p>
  <p>Here is a <a href="http://codepen.io/noobskie/pen/bVZVaK?editors=101" rel="nofollow noreferrer"><strong>Codepen</strong></a></p>