时间戳

首页 > 解决方案 > 如何在每张幻灯片中显示带有多个项目的引导轮播？

javascript - 如何在每张幻灯片中显示带有多个项目的引导轮播？

问题描述

引导版本：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>
  <!-- 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>

目前它如何显示： 当前滑块

所需的结果应该是一次显示在屏幕上的所有图像都应该滚动并且新图像应该显示在适当的位置。在正常情况下，滚动条会滚动出当前显示的所有图像，然后显示下一组图像。当前发生的情况是，当整个滚动条滚动图像时，最后只附加了一个图像。

标签： javascripttwitter-bootstrap-3

解决方案

一个很好的解决方法是为幻灯片添加一个透明图像，然后在标题部分中，您可以添加一个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然后，您可以按照您想要在内部排列图像的方式设置样式。

推荐阅读