使用 Bootstrap 轮播在每张幻灯片上仅显示 8 个项目答案

【问题标题】：Using Bootstrap carousel to only show 8 items on each slide使用 Bootstrap 轮播在每张幻灯片上仅显示 8 个项目
【发布时间】：2017-09-08 17:18:52
【问题描述】：

我正在生成一个不确定数字对象的数组（因为该数组是动态创建的，并且基于管理界面以及它们输入的对象数量。）我正在尝试使用 Bootstrap 轮播在每个对象上仅显示 8 个对象幻灯片，如果超过 8 张，则将附加内容移至下一张幻灯片，直到 16，然后将下一张幻灯片移至 24，依此类推。我还希望它在用户向前或向后点击时运行（而不是自动浏览幻灯片。）

以下是我正在运行的代码，包括变量 idx，它是数组中的顺序对象编号（从零开始）。

HTML

            <div id="articles" class="articles"></div>

JavaScript：

    $(document).ready(function(){
        <% JSONObject jsonObject=(JSONObject)session.getAttribute("responseDetailsJson"); %>
        var tileSetObjects = <%=jsonObject%>
            $.each(tileSetObjects.HelpJSONArray, function(idx, obj){
                $('#articles').append('<article class="pdf-guide" id="article-'+idx+'"><a href="'+obj.LINKVALUE+'" class="link-wrapper"><div class="title-link">'+obj.TITLE+'</div><p class="description">'+obj.LONGCONTENT+'</p></a></article>');
            });
        });

感谢您的帮助！

【问题讨论】：

标签： jquery arrays twitter-bootstrap twitter-bootstrap-3 carousel

【解决方案1】：

您说您正在使用 Bootstrap，但您的标记根本没有反映这一点。

我将从Bootstrap JavaScript Documentation 开始，其中包含有关轮播的详细部分。

正如它所描述的，将interval 选项设置为“false”以禁用自动滚动，这将实现您想要的行为。如文档中所述：

自动循环项目之间的延迟时间。如果为 false，carousel 将不会自动循环。

关于一次 8 个，您的 JavaScript 看起来应该可以工作，但需要修改标记注入部分以匹配 Bootstrap 轮播标记（参见上面的链接）。

【讨论】：

【解决方案2】：

我不确定这是否可以通过 Bootstrap 轮播实现。但是有些滑块可以满足您的要求。 “Slick”滑块是一个符合您要求的插件，而且它也响应迅速。

您可以在此处找到演示：http://kenwheeler.github.io/slick/ 并搜索“Multiple Items”。

【讨论】：

【解决方案3】：

我建议使用 Flickity 一个 JavaScript 滑块库，由 Metafizzy 的 David DeSandro 构建。为了让您制作或创建响应式、触摸友好的轮播，您可以轻松自定义。这包含不同的功能，例如 wraparround、freescroll、groupcells、autoplay、lazyload、视差等等。

为了让您根据需要对单元格进行分组，例如，您需要在每张幻灯片中使用 8 个，您需要将 data-flickity='{ "groupCells": 8 } 设置为您想要的数字。然后根据您想要的数字除以 100% 例如 100% 将其除以 8 然后将其设置为轮播宽度 .carousel-cell { width: 12.5%;} 我希望我能帮助您并为您的网络添加额外的库或插件发展。祝你今天过得愉快。 :)

  <!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
    <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
</head>
<body>
    <h1>Flickity - groupCells</h1>

    <!-- Flickity HTML init -->
    <div class="carousel" data-flickity='{ "groupCells": 8, "autoPlay": true }' style="">
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <!--Add More Here.....-->
    </div>

</body>
</html>
<style type="text/css">
    /* external css: flickity.css */

* { box-sizing: border-box; }

body { font-family: sans-serif; }

.carousel {
  background: #EEE;
}

.carousel-cell {
  width: 12.5%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: carousel-cell;
}

.carousel-cell.is-selected {
  background: #ED2;
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

</style>

【讨论】：

【解决方案4】：

对象的数量取决于您分配给 BootStrap Carousel 的宽度，并取决于每张幻灯片的宽度。

enter code herehttp://jsfiddle.net/asimshahiddIT/f1a1zbh4/1/

【讨论】：