I have create a slide show that has next and previous buttons and an area of 'dots' that link to a specific slide, however I'm having difficulty in looping the sideshow so it runs automatically.
Ive tried making a loop function but it seems to act strangely. I'm pretty new to jquery and would really appreciate some help. Code: $(document).ready(function(){ //global fade time var fadetime = 500; //global amout of slides var current = 0; var amountOfSlides = $("#slideshow > .slide").size(); //create links for each slide in the dot area var theDots = ""; var dotCounter = 0; var firstDot = ' class="current" '; $(".slide").each(function(){ theDots = theDots + '<a href="" name="'+ dotCounter +'" ' + firstDot +' ></a> '; firstDot = ""; dotCounter++; }); $("#dot-area").html(theDots); //next button $("#next").live("click", function(e){ e.preventDefault(); //make current selector var currentSelector = ".slide:eq(" + current + ")"; var currentDotSelector = "#dot-area a:eq(" + current + ")"; current = parseInt(current); current = current + 1; if(current == amountOfSlides){ current = 0; } //make next selector var nextSelector = ".slide:eq(" + current + ")"; var nextDotSelector = "#dot-area a:eq(" + current + ")"; //remove .current from dot and add it to new one $(currentDotSelector).removeClass("current"); $(nextDotSelector).addClass("current"); //fade out current and fadein next $(currentSelector).fadeOut(fadetime,function() { $(nextSelector).fadeIn(fadetime); }); }); //previous button $("#previous").live("click", function(e){ e.preventDefault(); //make current selector var currentSelector = ".slide:eq(" + current + ")"; var currentDotSelector = "#dot-area a:eq(" + current + ")"; current = current - 1; if(current < 0){ current = (amountOfSlides - 1); } //make next selector var previousSelector = ".slide:eq(" + current + ")"; var previousDotSelector = "#dot-area a:eq(" + current + ")"; //remove .current from dot and add it to new one $(currentDotSelector).removeClass("current"); $(previousDotSelector).addClass("current"); //fade out current and fadein next $(currentSelector).fadeOut(fadetime,function() { $(previousSelector).fadeIn(fadetime); }); }); //dot click $("#dot-area a").live("click", function(e){ e.preventDefault(); //current selector var currentSelector = ".slide:eq(" + current + ")"; var currentDotSelector = "#dot-area a:eq(" + current + ")"; //the one to fade to current = $(this).attr("name"); var dotSlide = ".slide:eq(" + current + ")"; var newDotSelector = "#dot-area a:eq(" + current + ")"; //remove .current from dot and add it to new one $(currentDotSelector).removeClass("current"); $(newDotSelector).addClass("current"); $(currentSelector).fadeOut(fadetime,function() { $(dotSlide).fadeIn(fadetime); }); }); //begin loop function slideshowLoop(){ //make current selector var currentSelector = ".slide:eq(" + current + ")"; var currentDotSelector = "#dot-area a:eq(" + current + ")"; current = parseInt(current); current = current + 1; if(current == amountOfSlides){ current = 0; } //make next selector var nextSelector = ".slide:eq(" + current + ")"; var nextDotSelector = "#dot-area a:eq(" + current + ")"; //remove .current from dot and add it to new one $(currentDotSelector).removeClass("current"); $(nextDotSelector).addClass("current"); //fade out current and fadein next $(currentSelector).fadeOut(fadetime,function() { $(nextSelector).fadeIn(fadetime).fadeTo(3000, 1); slideshowLoop() }); } slideshowLoop(); }); Any help would be much appreciated. Cheers.