Jump to content

Slideshow "Next" and "Previous" buttons


Coh3n

Recommended Posts

Hello! I'm looking to add a next and previous button to my slideshow (rotating images), but I can't get the code to work right. I just get some odd behavior. Clicking next will work until I get to the last image, then there's a really long delay. Previous will only work when on the first image, and again it delays after one click. Hopefully someone can help. :) Thanks in advance. E: Resolved. Turns out the solution was pretty simple. Fixed code is below.

var    currentInterval = 0;var currentItem = 0;var INITIAL_FADE_IN = 1500; // initial fade-in time (in milliseconds)    ITEM_INTERVAL = 4000; // interval between items (in milliseconds)    FADE_TIME = 2500; // cross-fade time (in milliseconds)// Interval code derived from:// http://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/function elementRotator(startIndex) { //start after HTML, images have loaded        var InfiniteRotator =    {	    init: function()	    {		     		    currentItem = startIndex; 		    // show first item		    $('.rotating_element').eq(currentItem).fadeIn(INITIAL_FADE_IN);		    		    // start the rotating		    startInterval();	    }    };     InfiniteRotator.init();};function startInterval() {        // loop through the items    currentInterval = setInterval(function() {	    $('.rotating_element').eq(currentItem).fadeOut(FADE_TIME);	    if (currentItem >= ($('.rotating_element').length - 1))		    currentItem = 0;	    else		    currentItem++;	    	    $('.rotating_element').eq(currentItem).fadeIn(FADE_TIME);    }, ITEM_INTERVAL);}$(window).load(function() {    elementRotator(Math.floor((Math.random() * ($('.rotating_element').length - 1)) + 1));});function nextImage() {        clearInterval(currentInterval);        $('.rotating_element').eq(currentItem).fadeOut(FADE_TIME / 2);    if (currentItem >= ($('.rotating_element').length - 1))        currentItem = 0;    else        currentItem++;            $('.rotating_element').eq(currentItem).fadeIn(FADE_TIME / 2);        startInterval();}function prevImage() {        clearInterval(currentInterval);        $('.rotating_element').eq(currentItem).fadeOut(FADE_TIME / 2);    if (currentItem <= 0)	    currentItem = ($('.rotating_element').length - 1);    else	    currentItem--;            $('.rotating_element').eq(currentItem).fadeIn(FADE_TIME / 2);        startInterval();}

Edited by Coh3n
Link to comment
Share on other sites

Updated the code a little. Haven't made any progress after messing with it for a couple hours.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...