Skip to content

Instantly share code, notes, and snippets.

@dangayle
Created March 15, 2012 00:06
Show Gist options
  • Save dangayle/2040573 to your computer and use it in GitHub Desktop.
Save dangayle/2040573 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 =
{
init: function()
{
//set values
var initialFadeIn = 1000;
var itemInterval = 3000;
var fadeTime = 2500;
var numberOfItems = $('.sliderItem').length;
var currentItem = 0;
//fade in initial slide
$('.sliderItem').eq(currentItem).stop().transition({opacity: 1},2000);
//start looping through slides
var infiniteLoop = 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);
}, itemInterval);
//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);
},
function () {
//sloppy, sloppy, sloppy repeat of setInterval function above
//how to isolate that function to make it callable outside of the init function?
infiniteLoop = setInterval(function(){
$('.sliderItem').eq(currentItem).stop().transition({opacity: 0},2000);
if(currentItem == numberOfItems -1){
currentItem = 0;
}else{
currentItem++;
}
$('.sliderItem').eq(currentItem).stop().transition({opacity: 1},1000);
}, itemInterval);
}
);
}
};
InfiniteRotator.init();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment