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

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 文档开始，其中包含有关 Carousel 的详细部分。

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

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

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