Question

Ive been trying to learn and use twitter bootstrap, especially the carousel element. To this end, I have managed to replicate the example in the documentation and everything seems fine – works as expected. My sample HTML carousel code is on: http://dpaste.com/772419/

However, what I would like to do is, tell bootstrap not to make a slide, but rather show all the three (how many ever are present) images in one row – similar to how amazon displays its products. I have read the documentation, but could not figure out how this can be done.

Any thoughts, guidance would be very much appreciated. Thanks.

Answer 1

From my experience using bootstrap in the past I have used this HTML structure. So I believe you could just load multiple images in one slide… Like below..

<div class="carousel">
      <div class="carousel-inner">

    <!-- your slide -->
         <div class="item active">
                <div class="product">
                    <img src="" alt="" />
                    <p>this is a caption</p>
                </div>
                <div class="product">
                    <img src="" alt="" />
                    <p>this is a caption</p>
                </div>
                <div class="product">
                    <img src="" alt="" />
                    <p>this is a caption</p>
                </div>

         </div> 
    <!-- end slide -->

    <!-- your slide -->
         <div class="item">
                <div class="product">
                    <img src="" alt="" />
                    <p>this is a caption</p>
                </div>
                <div class="product">
                    <img src="" alt="" />
                    <p>this is a caption</p>
                </div>
                <div class="product">
                    <img src="" alt="" />
                    <p>this is a caption</p>
                </div>
         </div> 
    <!-- end slide -->

      </div>

</div>

Basically each DIV with the tag ITEM on it is a slide. And ACTIVE determines the first slide.

EDIT

Okay so I messed around with it a bit locally trying to reproduce your problem. It looks like the caption issue is most likely coming from the CSS in the bootstrap.css file. Here is the code…

.carousel-caption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 10px 15px 5px;
background: #333;
background: rgba(0, 0, 0, 0.75);
}

The problem here is that your captions are positioned to the bottom of the item container. So the reason you can only see one is because of position:absolute; Making them all lay on top of each other. So most likely for your case you will need to tweak this CSS to get what you are looking for.

Also note: If you don’t want to change the twitter bootstrap CSS you could add a class to your body tag and use pseudo classes to overwrite the bootstrap CSS.

How to make the images display in columns:

To make the images columns you could do a structure similar to this…

HTML

<!-- product one -->
<div class="product-container">
    <img src="" alt="" />
    <div class="carousel-caption">
        <h4>Something For Sale</h4>
       <p>Some description</p>
    </div>
</div>


<!-- product two -->
<div class="product-container">
    <img src="" alt="" />
    <div class="carousel-caption">
        <h4>Something For Sale</h4>
       <p>Some description</p>
    </div>
</div>


<!-- product three -->
<div class="product-container">
    <img src="" alt="" />
    <div class="carousel-caption">
        <h4>Something For Sale</h4>
       <p>Some description</p>
    </div>
</div>

CSS

.product-container {
   width:33%;
   float:left;
}

.product-container img {
  margin:0 auto 0 auto;
}

That should get you in the ball park anyways… It might need to be tweaked a bit.