I would appreciate it if anyone can advice on how to modify Twitter Bootstrap 2 carousel in order to display a set of thumbnails at a time similar to this jquery plugin (jcarousel)
http://sorgalla.com/projects/jcarousel/examples/static_simple.html
Thanks
Currently there is no support for such an option on the Bootstrap Carousel and i wouldn't recommend you hack away at the script since that amounts to basically creating a new one, and when updated come around you might lose support but there are other ways that you can fake such a setup by using the .thumbnails
group that the bootstrap carries. You will just be limited to always giving the slider container a width, or a span class, like so:
HTML
<div class="carousel slide span8" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
<li class="span2">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="span2">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="span2">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li class="span2">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
</ul>
</div>
</div>
<a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
</div>
As you can see i nested a thumbnail group inside the item
divs that the carousel slides, this way you can have a group of images slide and there is no need to modify the original script.
Note *: Updated demo with multiple image sizes inside the carousel.