All geek questions in one place

Using Bootstrap Carousel to display a total of 8 items on each slide

I create an array of indefinable numeric objects (since the array is created dynamically and is based on the admin interface and the number of objects entered by it). I am trying to use the Bootstrap carousel to display a total of 8 objects on each slide, and if there are more than 8, move additional functions to the next slide to 16, then the next slide to 24, etc. I also want it to start if the user clicks forward or backward (so as not to go through the slides automatically.)

The following is my code that runs, including the idx variable, which is the serial number of the object in the array (based on zero.)

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

Thanks for the help!

+5
source share
4 answers

You say you use Bootstrap, but your markup does not reflect this at all.

I would start with the Bootstrap JavaScript Documentation , which contains a detailed section on the carousel.

As it describes, set the interval parameter to false to disable automatic scrolling, which will achieve the desired behavior. As described in the documentation:

Delay time for automatically switching an item. If false, the carousel will not automatically cycle through.

As for 8 at a time, your JavaScript looks like it should work, although part of the markup injection will need to be changed to match the markup of the Bootstrap carousel (see link above).

+4
source

I'm not sure if this is possible using the Bootstrap carousel. But there are sliders that can suit your requirements. The Slick slider is a plugin that fits your requirement and it also responds.

Here you can find a demo: http://kenwheeler.imtqy.com/slick/ and find "Multiple Elements".

0
source

I recommend using the Flickity JavaScript Slider Library created by David DeSandro from Metafizzy's fame. So that you can create or create responsive, easy-to-use carousels that can be easily customized by you. It contains various functions such as wraparround, freescroll, groupcells, autoplay, lazyload, parallax and many others.

In order for you to group the cell on what you need, for example, you need 8 on each slide, you need to set data-flickity='{ "groupCells": 8 } to the desired number. Then divide 100% by which base of the number you need, for example, 100% divide it by 8, then set it as the width of the carousel .carousel-cell { width: 12.5%;} . I hope that I will help you and add an additional library or plugins for your network. development. Have a nice day.:)

  <!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>
0
source

the number of objects depends on the width that you assign to the BootStrap carousel, and depends on the width of each slide.

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

-1
source

Source: https://habr.com/ru/post/1266661/

More articles:


All Articles