I am working on creating a carousel effect with three list elements that should slide in and out of the container when the left or right arrows are clicked. I want the list elements to wrap so that when the last element is reached, it goes back to the first element, similar to a carousel. I prefer not to use a plugin for this project.
I have tried a couple of approaches to achieve this effect. The first code snippet provided will slide the elements, but they do not wrap onto themselves. You can view the fiddle here: http://jsfiddle.net/defmetalhead/A23g9/9/
$('#rightArrow').on('click', function () {
var end = $(".upComingTiles li").length;
$(".upComingTiles li").animate({ 'left': '-=310px' }, 1000)
});
The second approach I tried works as intended, where the list elements shift one at a time and wrap properly. You can check out the fiddle here: http://jsfiddle.net/defmetalhead/3YM8G/
$('#rightArrow').on('click', function () {
var end = $(".upComingTiles li").length;
$(".upComingTiles").animate({ 'left': '-=310px' }, 'slow', function () {
$(".upComingTiles li:first").insertAfter(".upComingTiles li:last")
});
});