var slideWidth=300; var sliderTimer; $(function(){ $('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth); sliderTimer=setInterval(nextSlide,1000); $('.viewport').hover(function(){ clearInterval(sliderTimer); },function(){ sliderTimer=setInterval(prevSlide,1000); }); $('#next_slide').click(function(){ clearInterval(sliderTimer); nextSlide(); sliderTimer=setInterval(nextSlide,1000); }); $('#prev_slide').click(function(){ clearInterval(sliderTimer); prevSlide(); sliderTimer=setInterval(nextSlide,1000); }); }); function nextSlide(){ var currentSlide=parseInt($('.slidewrapper').data('current')); currentSlide++; if(currentSlide>=$('.slidewrapper').children().size()) { $('.slidewrapper').css('left',-(currentSlide-2)*slideWidth); $('.slidewrapper').append($('.slidewrapper').children().first().clone()); $('.slidewrapper').children().first().remove(); currentSlide--; } $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide); } function prevSlide(){ var currentSlide=parseInt($('.slidewrapper').data('current')); currentSlide--; if(currentSlide<0) { $('.slidewrapper').css('left',-(currentSlide+2)*slideWidth); $('.slidewrapper').prepend($('.slidewrapper').children().last().clone()); $('.slidewrapper').children().last().remove(); currentSlide++; } $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide); }
<div class='viewport'> <ul class='slidewrapper' data-current=0> <li class='slide'> Slide 1 </li> <li class='slide second'> Slide 2 </li> <li class='slide third'> Slide 3 </li> </ul> </div> <a href='javascript: void(0)' id='prev_slide' class='arrows'>←</a> <a href='javascript: void(0)' id='next_slide' class='arrows'>→</a>
.viewport{ width: 300px; height: 100px; overflow: hidden; position: relative; } .slidewrapper{ position: absolute; left: 0; top: 0; height: 100px; margin: 0; padding: 0; } .slide{ width: 300px; height: 100px; float: left; list-style: none; margin: 0; padding: 0; background: #ff0000; } .second{ background: #00ff00; } .third{ background: #0000ff; }