Skip to content

Instantly share code, notes, and snippets.

@Demwunz
Created March 9, 2012 16:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Demwunz/2007460 to your computer and use it in GitHub Desktop.
Save Demwunz/2007460 to your computer and use it in GitHub Desktop.
JavaScript: lightweight jQuery slideshow
var slideContainer = $('.carousel'),
slides = slideContainer.find('li'),
slideCount = slides.length,
oldSlide = 0,
currentSlide = 0,
fadeSpeed = 500,
slideSpeed = 4000,
auto = true,
animating = false,
tabs = $('.tabs, .carousel-links').find('li'),
timeout;
tabs.filter(':first').addClass('activeSlide');
slides.hide().filter(':first').show();
var slideRotate = function() {
//set new slide
currentSlide = (auto ? (oldSlide + 1) : currentSlide) % slideCount;
//navigation
tabs.removeClass('activeSlide').filter(':eq(' + currentSlide + ')').addClass('activeSlide');
//slide
animating = true;
slides.eq(oldSlide).stop().animate({opacity: "hide"},{queue : false, duration: fadeSpeed}, 'swing');
slides.eq(currentSlide).stop().animate({opacity: "show"},{queue : false, duration: fadeSpeed}, 'linear', function(){
animating = false;
});
//set the old slide
oldSlide = currentSlide;
};
var slideInterval = setInterval(slideRotate, slideSpeed);
//now add the controls:
tabs.each(function(index, elem) {
$(elem).bind('mouseenter', function(event) {
auto = false;
fadeSpeed = 100;
currentSlide = index;
clearInterval(slideInterval);
if (animating) {
timeout = setTimeout(slideRotate, fadeSpeed);
} else{
slideRotate();
}
}).bind('mouseleave', function(event) {
auto = true;
fadeSpeed = 500;
clearTimeout(timeout);
slideInterval = setInterval(slideRotate, slideSpeed);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment