View Full Version : Adding next & previous buttons to this jQuery slideshow

06-20-2010, 11:10 PM
I'm trying to add next and previous buttons to this slideshow done in jQuery. I've gotten stuck trying to figure it out with no progress. Could anyone help me out with this? Thanks.

Here's the code:

/* This code is executed after the DOM has been completely loaded */

var totWidth=0;
var positions = new Array();

$('#slides .slide').each(function(i){

/* Traverse through all the slides and store their accumulative widths in totWidth */

positions[i]= totWidth;
totWidth += $(this).width();

/* The positions array contains each slide's commulutative offset from the left part of the container */

alert("Please, fill in width & height for all your images!");
return false;



/* Change the cotnainer div's width to the exact width of all the slides combined */

$('#menu ul li a').click(function(e,keepScroll){

/* On a thumbnail click */


var pos = $(this).parent().prevAll('.menuItem').length;

/* Start the sliding animation */

/* Prevent the default action of the link */

// Stopping the auto-advance if an icon has been clicked:
if(!keepScroll) clearInterval(itvl);

$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
/* On page load, mark the first thumbnail as active */

* Enabling auto-advance.

var current=1;
function autoAdvance()
if(current==-1) return false;

$('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]); // [true] will be passed as the keepScroll parameter of the click function on line 28

// The number of seconds that the slider will auto-advance in:

var changeEvery = 7;

var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);

/* End of customizations */