如何显示每张幻灯片中包含多个项目的自举轮播？

Question

Bootstrap Ver：3.3.7

我想在引导轮播中的一张幻灯片中显示多个图像。

经过大量搜索，发现此网站https://www.geeksforgeeks.org/how-to-display-bootstrap-carousel-with-three-post-in-each-slide/

在示例2中，问题已得到部分解决，即我可以在一张幻灯片中显示多个图像，但是在此网站中编写的javascript代码正在克隆所有图像并最终一次附加一个图像，这并不是所期望的效果。

$(window).load(function() {
  $(".carousel .item").each(function() {
    var i = $(this).next();
    i.length || (i = $(this).siblings(":first")),
      i.children(":first-child").clone().appendTo($(this));

    for (var n = 0; n < 4; n++)(i = i.next()).length ||
      (i = $(this).siblings(":first")),
      i.children(":first-child").clone().appendTo($(this))
  })
});

我的HTML代码

<div id="carousel-commodities" class="carousel slide col-md-12"
  style="padding-left: 0; padding-right: 0;" data-ride="carousel">
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <div class="col-sm-4">
        <a href="sourcing-solutions.html">
          <img src="assets/img/projects/corporate-gift.jpg"
            alt="Corporate Gifts">
          <div class="carousel-caption">
            <h3>Corporate Gifts</h3>
          </div>
        </a>
      </div>
    </div>
    <div class="item">
      <div class="col-sm-4">
        <a href="sourcing-solutions.html">
          <img src="assets/img/projects/stationary-items.jpg"
            alt="Stationary Items">
          <div class="carousel-caption">
            <h3>Stationary Items</h3>
          </div>
        </a>
      </div>
    </div>
    <div class="item">
      <div class="col-sm-4">
        <a href="sourcing-solutions.html">
          <img src="assets/img/projects/solar-panel.jpg"
            alt="Solar Panel">
          <div class="carousel-caption">
            <h3>Solar Panel</h3>
          </div>
        </a>
      </div>
    </div>
    <div class="item">
      <div class="col-sm-4">
        <a href="sourcing-solutions.html">
          <img src="assets/img/projects/construction-machinary.jpg"
            alt="Construction Machinary">
          <div class="carousel-caption">
            <h3>Construction Machinary</h3>
          </div>
        </a>
      </div>
    </div>
    <div class="item">
      <div class="col-sm-4">
        <a href="sourcing-solutions.html">
          <img src="assets/img/projects/power-tools.jpeg"
            alt="Power Tools">
          <div class="carousel-caption">
            <h3>Power Tools</h3>
          </div>
        </a>
      </div>
    </div>
    <div class="item">
      <div class="col-sm-4">
        <a href="sourcing-solutions.html">
          <img src="assets/img/projects/paint-accessories.png"
            alt="Paint Accessories">
          <div class="carousel-caption">
            <h3>Paint Accessories</h3>
          </div>
        </a>
      </div>
    </div>
    <div class="item">
      <div class="col-sm-4">
        <a href="sourcing-solutions.html">
          <img src="assets/img/projects/hardware-tools.jpg"
            alt="Hardware Tools">
          <div class="carousel-caption">
            <h3>Hardware Tools</h3>
          </div>
        </a>
      </div>
    </div>
    <div class="item">
      <div class="col-sm-4">
        <a href="sourcing-solutions.html">
          <img src="assets/img/projects/fasteners-hardware.jpg"
            alt="Fasteners">
          <div class="carousel-caption">
            <h3>Fasteners</h3>
          </div>
        </a>
      </div>
    </div>
    <div class="item">
      <div class="col-sm-4">
        <a href="sourcing-solutions.html">
          <img src="assets/img/projects/fabrics.jpg" alt="Fabrics">
          <div class="carousel-caption">
            <h3>Fabrics</h3>
          </div>
        </a>
      </div>
    </div>
    <div class="item">
      <div class="col-sm-4">
        <a href="sourcing-solutions.html">
          <img src="assets/img/projects/electronic-gadgets.jpg"
            alt="Electronic Gadgets">
          <div class="carousel-caption">
            <h3>Electronic Gadgets</h3>
          </div>
        </a>
      </div>
    </div>
    <div class="item">
      <div class="col-sm-4">
        <a href="sourcing-solutions.html">
          <img src="assets/img/projects/chandeliers.jpg"
            alt="Chandeliers">
          <div class="carousel-caption">
            <h3>Chandeliers</h3>
          </div>
        </a>
      </div>
    </div>
    <div class="item">
      <div class="col-sm-4">
        <a href="sourcing-solutions.html">
          <img src="assets/img/projects/furniture.jpg"
            alt="Furniture">
          <div class="carousel-caption">
            <h3>Furniture</h3>
          </div>
        </a>
      </div>
    </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-commodities" role="button"
    data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"
    aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-commodities" role="button"
    data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"
    aria-hidden="true"></span>
  <span class="sr-only">Next</span>
  </a>
</div>

期望的结果应该是一次滚动显示在屏幕上的所有图像，并且应该将新图像显示在适当的位置。

Answer 1

一种不错的解决方法是为幻灯片添加透明图像，然后在标题部分中添加一个div，其中包含多个图像。

<div class="item active">
  <div class="col-sm-4">
    <a href="sourcing-solutions.html">
      <img src="transparent.png"
        alt="Nothing here">
      <div class="carousel-caption">
        <div class="groupImgs">
          <img src="image1" />
          <img src="image2" />
          <img src="image2" />
        </div>
        <h3>Corporate Gifts</h3>
      </div>
    </a>
  </div>
</div>

然后您可以按照想要在内部排列图像的方式来样式化groupImgs。