Using Bootstrap carousel to only show 8 items on each slide

Question

I am generating an array of indeterminable number objects (since the array is created dynamically and based on an admin interface and how many objects they have entered.) I'm trying to use the Bootstrap carousel to display only 8 objects on each slide and if there are more than 8, move the extras to the next slide until 16, then the next slide up to 24, and so on. I also want it to run if the user clicks forward or back (not to go through the slides automatically.)

The following is my code that is being run, including the variable idx which is the sequential object number in the array (zero based.)

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>');
            });
        });

Thank you for the assistance!

Answer 1

You say you are using Bootstrap, but your markup does not reflect that at all.

I would start with the Bootstrap JavaScript Documentation which includes a detailed section on Carousel.

As it describes, set the interval option to 'false' to disable the auto scroll which will achieve your desired behavior. As described in the documentation:

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

Regarding the 8 at a time, your JavaScript looks like it should work, though the markup injection part will need to be modified to match the Bootstrap carousel markup (see above link).