Skip to content

Instantly share code, notes, and snippets.

@superfine
Forked from jefflembeck/gist:2040712
Created October 31, 2012 19:18
Show Gist options
  • Save superfine/3989217 to your computer and use it in GitHub Desktop.
Save superfine/3989217 to your computer and use it in GitHub Desktop.
jquery slider loop thing
//Originally from http://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/
var InfiniteRotator =
{
itemInterval: 3000,
infiniteLoop: function() {
setInterval(function(){
$('.sliderItem').eq(currentItem).stop().transition({opacity: 0},2000);
//if at last item, reset currentItem to 0
if(currentItem == numberOfItems -1){
currentItem = 0;
}else{
currentItem++;
}
$('.sliderItem').eq(currentItem).stop().transition({opacity: 1},1000);
}, InfiniteRoator.itemInterval);
},
init: function()
{
//set values
var initialFadeIn = 1000,
fadeTime = 2500,
numberOfItems = $('.sliderItem').length,
currentItem = 0,
infiniteLoop;
//fade in initial slide
$('.sliderItem').eq(currentItem).stop().transition({opacity: 1},2000);
//start looping through slides
//interrupt loop when hovering over navigation
$('#sliderNavigation li a').hover(
function () {
currentItem = $(this).closest('li').index();
clearInterval(infiniteLoop);
$('.sliderItem').stop().transition({opacity: 0},2000);
$('.sliderItem').eq(currentItem).stop().transition({opacity: 1},1000);
},InfiniteRotator.infiniteLoop());
}
};
InfiniteRotator.init();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment