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

admin管理员组

文章数量:1295118

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:

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 ments below:

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./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 ments below:

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Jul 28, 2015 at 19:48 Ken D asked Jul 28, 2015 at 19:17 Ken DKen D 6111 gold badge11 silver badge55 bronze badges 6

• looks fine to me, elaborate your issue? – Subhan Commented Jul 28, 2015 at 19:19
• you probably not including the bootstrap css file, because they the same functionality as a carousel of one image, but they made the container of the carousel contain the 4 images by dividing it with col-xs-3, which is a class in bootstrap css file. – BahaEddine Ayadi Commented Jul 28, 2015 at 19:25
• Bootstrap.css: pastebin./dsFhGPuA, Bootstrap.min.css: pastebin./ZspKhks7, slider.css: pastebin./tCSDj95G – Ken D Commented Jul 28, 2015 at 19:46
• @KenD I don't get what you mean by your ment, are you including these files with those urls (the pastebin ones)? or you're just showing me what you're including? – BahaEddine Ayadi Commented Jul 28, 2015 at 19:59
• The code is in those files – Ken D Commented Jul 28, 2015 at 20:48

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 6

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>

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...

本文标签： javascriptBootstrap Carousel Slider 4 Images at onceonly shows one image at a timeStack Overflow