Twitter Bootstrap 2 carousel - display a set of thumbnails at a time like jcarousel

Question

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

Answer 1

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> 

Demo, edit here.

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.

Answer 2

@andres-ilich first off this was a great answer, and you got me thinking about the jCarousel like feature and how the Twitter Bootstrap (TB) carousel would have to be hacked ( which is not ideal ). I completey agree with you and not a fan of messing with core framework overrides, but decided to see if there was a safe way to potentially "extend" the Carousel to deal with a per-item scroll like jCarousel.

Here is my rationale:

• I assumed that all the items are located in the first .item of the carousel. Since TB has it own logic and core functions about moving from item to item, I needed more granular control of the logic but do not want to wrestle or override the internals of the carousel. So I kept the carousel only at one item to prevent having to trap or override any of the events/code for TB carousel since they would never fire (motion wise that is).
• Used .prototype lightly and only to add a custom event to next/prev that I used to bind my custom logic later. The prototype clones the TB method first adds an $.trigger to the TB carousel next/prev and then executes the original TB carousel logic. This safeguards my logic to withstand future releases of TB (hopefully)
• Created a class called .jcarousel to allow for unique targeting of this type of carousel so that we do not interfere with other carousels on the page that would be leveraging the normal TB carousel functionality.

I commented the best I could in my code since I am enjoying a latte at starbucks while I was doing this, and I sure there is room for improvement since this was a literally an early morning waiting for the bus type of answer to this.

Hope this helps anyone that needs it. Loving Twitter Bootstrap! 2.1 is a great new release.

Here is the jsFiddle Demo jCarousel - Per Item extension