13

I'm trying to setup Twitter Bootstrap carousel with multiple items while maintaining the responsiveness.

I have a jsfiddle for testing setup http://jsfiddle.net/Va8Un/

What I would like to happen is to display 4 images each with caption to hold item titles and so forth within a carousel pane and they should be resized to fit the screen to stay on the same row at all times. Right now it's completely ignoring any attempts I make to adjust the image size to the screen, I figured setting the img max-width:100%; would do the trick but it doesn't seem to effect it. Moreover, the 4th image is being pushed to a second row because the images aren't resizing:

enter image description here

Any way to fix this with pure CSS or should I look for options beyond Twitter Bootstrap?

You can view the result here: http://jsfiddle.net/Va8Un/embedded/result/

Here is the HTML:

<div class="container">
    <div class="carousel slide" id="myCarousel">
        <div class="carousel-inner">
          <div class="item active">
                <ul class="thumbnails span12">
                    <li>
                        <div class="caption">
                            <h5>Caption</h5>
                        </div>
                        <div class="thumbnail">
                            <img src="http://placehold.it/260x180" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="caption">
                            <h5>Caption</h5>
                        </div>
                        <div class="thumbnail">
                            <img src="http://placehold.it/260x180" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="caption">
                            <h5>Caption</h5>
                        </div>
                        <div class="thumbnail">
                            <img src="http://placehold.it/260x180" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="caption">
                            <h5>Caption</h5>
                        </div>
                        <div class="thumbnail">
                            <img src="http://placehold.it/260x180" alt="">
                        </div>
                    </li>
                </ul>
          </div>         
          <div class="item">
               ...
          </div>
          <div class="item">
               ...
          </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>
</diV>
Noz
  • 6,216
  • 3
  • 47
  • 82
  • Show the view code. You can wrap the images in a div and set its width. – Sully Sep 20 '12 at 18:14
  • Added code + view link. The images are already wrapped in a `
    `, if I set a size to this however it won't be responsive and will disappear off the screen if it gets too small. Could you maybe give me an example?
     – Noz Sep 20 '12 at 18:24

2 Answers2

28

You can do this with the bootstrap fluid grid alone, just specify a .container-fluid container along with a .row-fluid row and give each one of your list items housing an image a .span* class, in this case 3 (3*4=12).

.container {
  margin-top: 10px;
}

img
{
  max-width:100%;   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="row-fluid">
    <div class="carousel slide" id="myCarousel">
      <div class="carousel-inner">
        <div class="item active">
          <ul class="thumbnails">
            <li class="span3">
              <div class="caption">
                <h5>Caption</h5>
              </div>
              <div class="thumbnail">
                <img src="http://placehold.it/260x180" alt="">
              </div>
            </li>
            <li class="span3">
              <div class="caption">
                <h5>Caption</h5>
              </div>
              <div class="thumbnail">
                <img src="http://placehold.it/260x180" alt="">
              </div>
            </li>
            <li class="span3">
              <div class="caption">
                <h5>Caption</h5>
              </div>
              <div class="thumbnail">
                <img src="http://placehold.it/260x180" alt="">
              </div>
            </li>
            <li class="span3">
              <div class="caption">
                <h5>Caption</h5>
              </div>
              <div class="thumbnail">
                <img src="http://placehold.it/260x180" alt="">
              </div>
            </li>
          </ul>
        </div>
        <div class="item">
          <ul class="thumbnails">
            <li class="span3">
              <div class="caption">
                <h5>Caption</h5>
              </div>
              <div class="thumbnail">
                <img src="http://placehold.it/260x180" alt="">
              </div>
            </li>
            <li class="span3">
              <div class="caption">
                <h5>Caption</h5>
              </div>
              <div class="thumbnail">
                <img src="http://placehold.it/260x180" alt="">
              </div>
            </li>
            <li class="span3">
              <div class="caption">
                <h5>Caption</h5>
              </div>
              <div class="thumbnail">
                <img src="http://placehold.it/260x180" alt="">
              </div>
            </li>
            <li class="span3">
              <div class="caption">
                <h5>Caption</h5>
              </div>
              <div class="thumbnail">
                <img src="http://placehold.it/260x180" alt="">
              </div>
            </li>
          </ul>
        </div>
        <div class="item">
          <ul class="thumbnails">
            <li class="span3">
              <div class="caption">
                <h5>Caption</h5>
              </div>
              <div class="thumbnail">
                <img src="http://placehold.it/260x180" alt="">
              </div>
            </li>
            <li class="span3">
              <div class="caption">
                <h5>Caption</h5>
              </div>
              <div class="thumbnail">
                <img src="http://placehold.it/260x180" alt="">
              </div>
            </li>
            <li class="span3">
              <div class="caption">
                <h5>Caption</h5>
              </div>
              <div class="thumbnail">
                <img src="http://placehold.it/260x180" alt="">
              </div>
            </li>
            <li class="span3">
              <div class="caption">
                <h5>Caption</h5>
              </div>
              <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>
  </div>
</div>

Demo: http://jsfiddle.net/Va8Un/10/

EDIT: here is the demo with corrections http://jsfiddle.net/Va8Un/550/

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
Andres I Perez
  • 75,075
  • 21
  • 157
  • 138
  • when we add bootstrap-responsive its ruining it : – Ünsal Korkmaz Jan 28 '13 at 15:38
  • @ÜnsalKorkmaz the bootstrap does not multiple elements per slide natively so this answer only tries to come up with a close solution that might work, but depends on your case :( – Andres I Perez Jan 28 '13 at 16:33
  • I've done this so far myself. What I was looking for is a slider that slides one item at a time (not 4 at a time like this one). Anyone knows a good example? – Pavel Nikolov Jun 09 '13 at 17:31
  • @PavelNikolov You can use [jCarousel](http://sorgalla.com/jcarousel/) to achieve the effect you are looking for quite easily. If you're looking for something along the lines of the bootstrap, another user wrote an answer with a change to the bootstrap's slider plugin which has the effect you are looking for; You can find it [here](http://stackoverflow.com/a/12057371/680398). – Andres I Perez Jun 09 '13 at 22:07
  • Thanks for the link - I'm currently using jCarousel. I will check the other solution. – Pavel Nikolov Jun 10 '13 at 10:59
  • Gets messed up on small screens because this soultion is not responsive at all. – Jaseem Jul 20 '13 at 10:49
  • how do you get this demo to run in jsfiddle? the carousel isn't exactly displaying.. – ina Nov 07 '13 at 23:20
0

I did it this way using Twitter Bootstrap:

<!-- Images Thumbnails -->
<div style="position:absolute;top:430px;height:115px;width:350px;margin:10px 0 0 10px;">
    <p style="margin:0;">Images</p>                     
    <!-- Product Images Carousel -->
    <div id="ImagesCarousel" class="carousel slide">
          <!-- carousel items -->
          <div class="carousel-inner">
                <div class="active item">
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>    
                </div>
                <div class="item">
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
                </div>
                <div class="item">
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
                </div>
          </div>
          <!-- Carousel nav -->
          <a class="carousel-control left" href="#ImagesCarousel" data-slide="prev">&lsaquo;</a>
          <a class="carousel-control right" href="#ImagesCarousel" data-slide="next">&rsaquo;</a>
    </div>
</div>

Where 'ryan_thumbnail_carousel_productimages.html' is:

<div class="thumbnail" style="float:left;margin:10px 15px 0 0;width:70px;height:70px; position:relative;"></div>
Noz
  • 6,216
  • 3
  • 47
  • 82
Ryan Walton
  • 1,099
  • 11
  • 15