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 (jca

Answer 1

@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