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

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

本文关键字：一次 图像 显示 一个 旋转 4个      更新时间：2023-09-26

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

我复制粘贴代码在这里:http://www.bootply.com/94452

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

有谁知道这是为什么吗?

如果你想一次滚动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>

您可以在视图中使用旋转指示器，并在每张幻灯片中按升序设置图片，例如

</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>
相关文章：