My goal is to build a simple slideshow for learning purposes. I want the list items to slide automatically to the left in a continuous loop.
I've written some code that makes the slides move, but I'm struggling to set the correct position for each slide (it just flashes and then disappears). Take a look at the demo to see the issue:
Html:
<div class="wrap">
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
Jquery:
var width = $('li').width();
var totalWidth = $('li').length * width;
var count = $('li').length;
var first = $('li').eq(0);
var last = $('li').eq(count-1);
$('ul').css({
'width' : totalWidth
});
first.addClass('active');
var start = function() {
target = $('.active').index();
target === last ? target = 0 : target = target+1;
nextSlide(target);
};
var nextSlide = function(target) {
//console.log(target);
$('.active').animate({'left':'-'+ width*target +'px'},300);
$('li').removeClass('active').eq(target).addClass('active');
};
setInterval(function () {
start();
}, 3000)