Question

我正在生成一组不确定的数字对象（因为数组是动态创建的，并且基于管理界面和他们输入了多少个对象。）我试图使用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>');
            });
        });

感谢您的帮助！

Answer 1

你说你正在使用Bootstrap，但你的标记根本没有反映出来。

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

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

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

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

Answer 2

我不确定Bootstrap轮播是否可行。但是有滑块可以满足您的要求。＆＃34;油滑＆＃34; slider是一个符合您要求的插件，它也是响应式的。

您可以在此处找到演示：http://kenwheeler.github.io/slick/并搜索＆＃34;多项＆＃34;。

Answer 3

我建议使用 Flickity 一个JavaScript滑块库，由Metafizzy成名的David DeSandro构建。为了让您制作或创建响应式，触摸友好的旋转木马，您可以轻松定制。它包含不同的功能，如wraparround，freescroll，groupcells，autoplay，lazyload，parallax等等。

为了按照您想要的方式对单元格进行分组，您需要将每张幻灯片中的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>

Answer 4

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

enter code here http://jsfiddle.net/asimshahiddIT/f1a1zbh4/1/

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

4 个答案: