I'm currently working on developing a carousel using JavaScript or jQuery. I've attempted the code snippet below, but I'm having trouble getting it to display in 3 or 4 columns. While I understand that Bootstrap can handle this easily, I'd like to achieve it without relying on a Bootstrap plugin. The carousel itself is functional, but the looping feature isn't working as intended.
var container = $("#carousel_wrapper");
var runner = container.find('ul');
var liWidth = runner.find('li:first').outerWidth();
var itemsPerPage = 3;
var noofitems = runner.find('li').length;
runner.width(noofitems * liWidth);
container.width(itemsPerPage*liWidth);
$('#right').click(function() {
$(runner).animate({ "left": "-=51px" }, "slow" );
});
$('#left').click(function() {
$(runner).animate({ "left": "+=51px" }, "slow" );
});div#carousel_wrapper{
overflow:hidden;
position:relative;
width:500px;
height: 100px;
}
ul {
padding:0px;
margin:0px;
position: absolute;
top:50px;
left: 0px;
width:300px;
height: 50px;
overflow: hidden;
}
ul li {
list-style:none;
float:left;
}
ul li div {
border:1px solid white;
width:50px;
height:50px;
background-color:gray;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="carousel_wrapper">
<ul>
<li>
<div>0</div>
</li>
<li>
<div>1</div>
</li>
<li>
<div>2</div>
</li>
<li>
<div>3</div>
</li>
<li>
<div>4</div>
</li>
<li>
<div>5</div>
</li>
<li>
<div>6</div>
</li>
<li>
<div>7</div>
</li>
</ul>
</div>
<div id="buttons">
<button id="left">left</button>
<button id="right">right</button>
</div>