title: Twitter Bootstrap Carousel - displaying multiple thumbnails
body: <p>I've created Carousel which displays 4 thumbnails per slide and I have two <a href="http://jsfiddle.net/S2rnm/487/" rel="nofollow">slides.</a> </p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="carousel slide span8" id="myCarousel"&gt;
              &lt;div class="carousel-inner"&gt;
                &lt;div class="item active"&gt;
                      &lt;ul class="thumbnails"&gt;
                          &lt;li class="span2"&gt;
                              &lt;div class="thumbnail"&gt;
                                  &lt;img src="http://placehold.it/260x180" alt=""&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li class="span2"&gt;
                              &lt;div class="thumbnail"&gt;
                                  &lt;img src="http://placehold.it/260x180" alt=""&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li class="span2"&gt;
                              &lt;div class="thumbnail"&gt;
                                  &lt;img src="http://placehold.it/260x180" alt=""&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li class="span2"&gt;
                              &lt;div class="thumbnail"&gt;
                                  &lt;img src="http://placehold.it/260x180" alt=""&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                      &lt;ul class="thumbnails"&gt;
                          &lt;li class="span2"&gt;
                              &lt;div class="thumbnail"&gt;
                                  &lt;img src="http://placehold.it/260x180" alt=""&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li class="span2"&gt;
                              &lt;div class="thumbnail"&gt;
                                  &lt;img src="http://placehold.it/260x180" alt=""&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li class="span2"&gt;
                              &lt;div class="thumbnail"&gt;
                                  &lt;img src="http://placehold.it/260x180" alt=""&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li class="span2"&gt;
                              &lt;div class="thumbnail"&gt;
                                  &lt;img src="http://placehold.it/260x180" alt=""&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
                                  &lt;a data-slide="prev" href="#myCarousel" class="left carousel-control"&gt;‹&lt;/a&gt;
              &lt;a data-slide="next" href="#myCarousel" class="right carousel-control"&gt;›&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>These slides are populated with images from database using codeigniter. Now question is, if I want to create 6-7 slides and I don't want to create them all manually how should I go about it in code. So when I click left arrow new set of images is loaded.</p>