title: Coexistance of 2 different Bootstrap carousels
body: <p>My problem is that i want to make coexist 2 different carousels based on Bootstrap.</p>
  
  <p>One is the simple one : </p>
  
  <pre><code>    &lt;div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel"&gt;
  
          &lt;!-- Carousel items --&gt;
          &lt;div class="carousel-inner"&gt;
              &lt;div class="active item"&gt;
                  &lt;img src="Images/pub.png"&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;img src="Images/pub.png"&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;img src="Images/pub.png"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Carousel nav --&gt;
          &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;
              &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;
              &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And the other, with 4 items displayed in one frame :</p>
  
  <pre><code>    &lt;div class="carousel slide" id="myCarousel2"&gt;
          &lt;div class="carousel-inner"&gt;
              &lt;div class="item active"&gt;
                  &lt;li class="col-lg-3"&gt;
                      &lt;div class="center-block"&gt;&lt;/div&gt;
                  &lt;/li&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;li class="col-lg-3"&gt;
                      &lt;div class="center-block"&gt;&lt;/div&gt;
                  &lt;/li&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;li class="col-lg-3"&gt;
                      &lt;div class="center-block"&gt;&lt;/div&gt;
                  &lt;/li&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;li class="col-lg-3"&gt;
                      &lt;div class="center-block"&gt;&lt;/div&gt;
                  &lt;/li&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;li class="col-lg-3"&gt;
                      &lt;div class="center-block"&gt;&lt;/div&gt;
                  &lt;/li&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;li class="col-lg-3"&gt;
                      &lt;div class="center-block"&gt;&lt;/div&gt;
                  &lt;/li&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;li class="col-lg-3"&gt;
                      &lt;div class="center-block"&gt;&lt;/div&gt;
                  &lt;/li&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;li class="col-lg-3"&gt;
                      &lt;div class="center-block"&gt;&lt;/div&gt;
                  &lt;/li&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;a class="left carousel-control" href="#myCarousel2" data-slide="prev"&gt;&lt;i class="glyphicon glyphicon-chevron-left"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;a class="right carousel-control" href="#myCarousel2" data-slide="next"&gt;&lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>myCarousel2 act like if u click on a chevron, only one item slide :</p>
  
  <pre><code>$('#myCarousel2').carousel({
      interval: 4000
      })
  
  $('.carousel .item').each(function(){
      var next = $(this).next();
      if (!next.length) {
          next = $(this).siblings(':first');
      }
      next.children(':first-child').clone().appendTo($(this));
  
      for (var i=0;i&lt;2;i++) {
          next=next.next();
          if (!next.length) {
              next = $(this).siblings(':first');
          }
  
          next.children(':first-child').clone().appendTo($(this));
      }
  });
  </code></pre>
  
  <p>Here is the css of the second carousel, which use Bootstrap and a modified version too :</p>
  
  <pre><code>    .carousel-inner .active.left { left: -25%; }
      .carousel-inner .next        { left:  25%; }
      .carousel-control.left,.carousel-control.right {background-image:none;}
  </code></pre>
  
  <p>Doing this, the first carousel act like the second. I think it's a conflict caused by the bootstrap classes the 2 carousels use, so i tried to override them by creating new classes specifics to the first carousel, but with the same attributes as Bootstrap, and it failed.</p>
  
  <p>Does someone have an idea?</p>
  
  <p>Thanks!</p>