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!
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).
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".
I recommend to use Flickity a JavaScript slider library, built by David DeSandro of Metafizzy fame. In order for you to make or create responsive, touch-friendly carousels that can easily customize by you. This contains different features such as wraparround, freescroll, groupcells, autoplay, lazyload, parallax and many more.
In order for you group cell on what you want for example you need 8 in every slide you need to set data-flickity='{ "groupCells": 8 } to what number you desire. Then divide 100% on what base from number you desired for example 100% divide it to 8 then set it as your carousel width .carousel-cell { width: 12.5%;} I hope I help you and add additional library or plugins for your web 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>