引导旋转滑块:一次4个图像-一次只显示一个图像?

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

我正在尝试在我的网站上实现这4个图像滑块，但是出于某种原因一次只能显示一个图像。

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

我在这里复制粘贴了代码: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.

由于某些原因，只有一个图像占用了4个图像的空间。当你点击右箭头或等待间隔时，它会转到第二个图像。

Does anyone know why this might be?

有人知道为什么会这样吗?

See code in comments below:

见下面评论中的代码:

2 个解决方案

#1

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.

如果你想一次滚动4张图片，那么你的图片没有被正确地嵌套。只要使用这个代码就可以了。

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

#2

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

希望是有帮助的……

#1