jquery - 使用 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，但您的标记根本没有反射(reflect)这一点。

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

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

The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.

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