title: Twitter bootstrap carousel with one big item and 5 small thumbnails inside it
body: <p>So basically what i need to achieve is this:</p>
  
  <p><img src="https://i.stack.imgur.com/tLrtq.jpg" alt="bootstrap gallery"></p>
  
  <p>One bootstrap gallery with 1 item displayed, scroll 1 item also but in the same time we can see the next images coming or the previous under this big image. We see 6 small size thumbnails witch are sliding along with the big image. The arrows should be place in the middle of everything not only the middle of the big picture.</p>
  
  <p>I started with the default bootstrap carousel code but got stacked at this point. Any solution for this thing?</p>
  
  <pre><code>&lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&gt;
  
      &lt;!-- Wrapper for slides --&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;
          &lt;div class="item active"&gt;
              &lt;img src="..." alt="..."&gt;
              &lt;div class="carousel-caption"&gt;
                  ...
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img src="..." alt="..."&gt;
              &lt;div class="carousel-caption"&gt;
                  ...
              &lt;/div&gt;
          &lt;/div&gt;
          ...
      &lt;/div&gt;
  
      &lt;!-- Controls --&gt;
      &lt;a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"&gt;
          &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"&gt;
          &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Next&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>