CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Ken D
Ken D

Reputation: 61

Bootstrap Carousel Slider: 4 Images at once - only shows one image at a time?

I am trying to implement this 4 image slider on my website, but for some reason only one image shows at a time.

I copy pasted the code here: http://www.bootply.com/94452

For some reason, only one image occupies the space reserved for 4 of the images. When you hit the right arrow or wait for the interval, it goes to the second image.

Does anyone know why this might be?

See code in comments below:

Upvotes: 4

Views: 14013

Answers (2)

Manindra Singh
Manindra Singh

Reputation: 769

if you want 4 images at a time to scroll then your images are not nested properly.just use this code it should work fine.

<div class="col-md-12 text-center"><h3>Bootstrap 3 Multiple Slide Carousel</h3></div>
<div class="col-md-6 col-md-offset-3">
<div class="carousel slide" id="myCarousel">
  <div class="carousel-inner">
    <div class="item active">
      <div class="row">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=1" class="img-responsive"></a></div>
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=2" class="img-responsive"></a></div>
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=3" class="img-responsive"></a></div>
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=4" class="img-responsive"></a></div>
      </div>
    </div>
    <div class="item">
      <div class="row">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=5" class="img-responsive"></a></div>
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=6" class="img-responsive"></a></div>
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=7" class="img-responsive"></a></div>
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=8" class="img-responsive"></a></div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>

Upvotes: 6

thusvir arjun
thusvir arjun

Reputation: 1

you can use carousel-indicators in your view and set each slide with a picture in ascending order eg.

</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" style="width:89%" >
    <div class="item active">
        <img src="picture source" alt="First slide">
        <div class="carousel-caption">
           <strong>anything on an image displayed</Strong>
        </div>
    </div>

hope it is helpful...

Upvotes: 0

Related Questions