27

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

user1275105
  • 2,643
  • 5
  • 31
  • 45

4 Answers4

66

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.

Andres I Perez
  • 75,075
  • 21
  • 157
  • 138
  • 1
    This works like a charm. Many thanks for taking the time to figure this one out. – Brandon Taylor Mar 22 '12 at 03:19
  • @Brandon glad it helped somebody :) here is an updated version with multiple carousels with different sized images http://jsfiddle.net/andresilich/S2rnm/ – Andres I Perez Mar 22 '12 at 12:42
  • Sweet. This really helped me out on a current project. I had looked at implementing jCarousel Lite, but this is sooo much better :) – Brandon Taylor Mar 22 '12 at 12:43
  • Nice solution, is this still the best way to achieve this? – stephenmurdoch Jul 04 '12 at 17:28
  • 1
    @stephenmurdoch pretty much, yes. You can try other solutions though, like the one mentioned in this post, jCarousel, but with bootstrap for now this is the only solution we have. – Andres I Perez Jul 04 '12 at 18:14
  • Anyway to get this to work with thumbnails containing captions? – Noz Aug 17 '12 at 17:29
  • @CyleHunter captions are actually part of the bootstrap framework. Check this demo out for example, http://jsfiddle.net/S2rnm/175/, i added captions to all the images (some above and below for illustration) and the only css change i made was centering them. – Andres I Perez Aug 17 '12 at 17:39
  • Slick example, but unfortunately it doesn't look like this supports the responsive features of Bootstrap. – Ted Avery Oct 25 '12 at 23:44
  • It works good when each of the UL elements has the same amount of LI sub-elements. What will happen if the last UL element will have, let's say, 3 LI sub-elements instead of 4 (like in the provided example)? Will it still look good for cyclical carousel? I do not think so. Thank you. – Antipod Jul 31 '13 at 22:15
  • @Antipod See -MasterBee answer to this question. He provided a true carousel option using the bootstrap framework which has the options you are looking for. What I provided was just an alternative to something that was not there to begin with. – Andres I Perez Aug 12 '13 at 13:52
  • Here's a Bootstrap 3.x example for anyone who is interested: http://bootply.com/81478 – Carol Skelly Oct 25 '13 at 11:48
13

@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

MasterBee
  • 131
  • 1
  • 2
0

See this excellent blog post on customizing the Bootstrap Carousel:

http://untame.net/2013/04/twitter-bootstrap-carousel/#part2

isapir
  • 21,295
  • 13
  • 115
  • 116
  • Note that [link-only answers are discouraged](http://meta.stackoverflow.com/tags/link-only-answers/info), SO answers should be the end-point of a search for a solution (vs. yet another stopover of references, which tend to get stale over time). Please consider adding a stand-alone synopsis here, keeping the link as a reference. – kleopatra Jan 13 '14 at 10:08
0

Try This one

Question : Twitter Bootstrap Vertical Thumbnail Carousel

GIT Ripo. : https://github.com/tutorialdrive/Bootstrap-Vertical-Thumbnail-Carousel

Community
  • 1
  • 1
Shivam Pandya
  • 1,061
  • 3
  • 29
  • 64