Question

您能告诉我如何在一个.item Bootstrap轮播上加载几张图片吗？

从This Demo可以看到我正在尝试这样的输出

[！[在此处输入图像说明] [2]] [2]

但是图像互相呈现。

这是我的代码

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://www.neverendingtech.com/new/wp-content/uploads/2013/03/businessman.png" alt="">
      <img src="http://www.wallscapeinc.com/images/businessman1.png" alt="">
    </div>
  </div>
</div>

Answer 1

完全符合你的例子：

＆＃13;

/* All images, but not the first */
.carousel-inner > .item img + img {
  position: absolute;
  left: 0;
  top: 0;
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://www.neverendingtech.com/new/wp-content/uploads/2013/03/businessman.png" alt="">
      <img src="http://www.wallscapeinc.com/images/businessman1.png" alt="">
    </div>
    <div class="item">
      <img src="http://www.wallscapeinc.com/images/businessman1.png" alt="">
    </div>
  </div>
</div>

＆＃13;

Answer 2

您可以按照以下链接每次使用自举轮播显示多图像轮播1项。

http://www.bootply.com/tagged/carousel

http://www.bootply.com/JAHTzGyft6

如何在Bootstrap Carousel的一个项目上有多个图像

2 个答案: