title: Twitter Bootstrap Javascript Carousel Multiple Active Item Transition
body: <p>In the examples I found so far, all of them either displaying one Item at a time. If I want to display multiple active items using thumbnails, examples show that the Item itself containing multiple thumbnail inside of it. When I press 'Next' or 'Previous' buttons, 'active' class is being set to another item so all of the contents of the item is being replaced. </p>
  
  <p>I want to display multiple active Items inside of the 'carousel-inner' class. I managed to do that but unfortunately the 'Next' and 'Previous' buttons stopped working. Below is the workaround i tried so far. For example, <strong>I want to move two of the active Items per 'Next' or 'Previous' button click</strong>. Any suggestion?</p>
  
  <pre><code>&lt;div id="myCarousel" class="carousel slide"&gt;
          &lt;div class="carousel-inner"&gt;
              &lt;div class="item active"&gt;
                  &lt;div class="row-fluid"&gt;
                      &lt;div class="span6"&gt;
                          &lt;a href="#x" class="thumbnail"&gt;
                              &lt;img src="http://ucsdnews.ucsd.edu/graphics/images/2009/11-09OceanRobots01.jpg" alt="Image" style="max-width: 100%;" /&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item active"&gt;
                  &lt;div class="row-fluid"&gt;
                      &lt;div class="span6"&gt;
                          &lt;a href="#x" class="thumbnail"&gt;
                              &lt;img src="http://www.nmsfocean.org/files/windfarm-250x250.jpg" alt="Image" style="max-width: 100%;" /&gt;&lt;/a&gt;
                      &lt;/div&gt;                       
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;div class="row-fluid"&gt;
                      &lt;div class="span6"&gt;
                          &lt;a href="#x" class="thumbnail"&gt;
                              &lt;img src="http://www.notempire.com/images/uploads/Conserve_Our_Oceans-2.jpg" alt="Image" style="max-width: 100%;" /&gt;&lt;/a&gt;
                      &lt;/div&gt;                      
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;div class="row-fluid"&gt;
                      &lt;div class="span6"&gt;
                          &lt;a href="#x" class="thumbnail"&gt;
                              &lt;img src="http://www.northcountrypublicradio.org/news/images/blacksmokervent_250.jpg" alt="Image" style="max-width: 100%;" /&gt;&lt;/a&gt;
                      &lt;/div&gt;                      
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;div class="row-fluid"&gt;
                      &lt;div class="span6"&gt;
                          &lt;a href="#x" class="thumbnail"&gt;
                              &lt;img src="https://lh6.googleusercontent.com/-jTLcTU1RvZc/Ts11y1haQqE/AAAAAAAAALk/xYJoRFK-ibw/s250-c-k-no/OceanSunfish" alt="Image" style="max-width: 100%;" /&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;div class="row-fluid"&gt;
                      &lt;div class="span6"&gt;
                          &lt;a href="#x" class="thumbnail"&gt;
                              &lt;img src="http://tcktcktck.org/wp-content/uploads/2011/09/ocean-heat.jpg" alt="Image" style="max-width: 100%;" /&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!--/carousel-inner--&gt;
          &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;‹&lt;/a&gt;
          &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;›&lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I am working on Angular JS project. So any angular solution will be highly appreciated. thanks.</p>