Monday, April 24, 2017

Using Bootstrap carousel to only show 8 items on each slide

By Hường Hana 5:30 AM , , , , Leave a Comment

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!

3 Answers

Answers 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).

Answers 2

I am not sure if this is possible with the Bootstrap carousel. But there are sliders that can fulfill your requirement. "Slick" slider is a plugin that matches your requirement and it's responsive too.

You can find the demo here: http://kenwheeler.github.io/slick/ and search for "Multiple Items".

Answers 3

number of object is depend on the width you assign to the BootStrap Carousel and depend on the width of each slides.

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

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment