Alter Carousel Script for Next Previous

[empiresolutions]

I'm trying to slightly alter the script found here, http://www.adrianhodge.com/web-desig...iv-slider-121/.

What i want to do is make the carousel work on a Next/Previous feature versus a 1, 2, 3 method. I tried to do it myself but found i was was just going in circles and nothing was working. Any help is appreciated. I have listed below the only parts that should matter.

Javascript

<script language="Javascript">
<!--
function slideFolio(col){
	var x = ((col-1)*-505)
	var folioChange = new Fx.Tween('folio', {duration:2000});
	folioChange.start('left',x);
	var cur = "trigger"+col;
	$(cur).addClass('current');

	for (i=1;i<=8;i++){
		var loopLI = "trigger"+i;
		if (cur==loopLI){}else{
			$(loopLI).removeClass('current');
		}
	}
}
//-->
</script>

HTML

<ul class="nums">
<li id="trigger1" class="current"><a href="javascript:slideFolio(1);" class="liinternal">1</a></li>
<li id="trigger2"><a href="javascript:slideFolio(2);" class="liinternal">2</a></li>
<li id="trigger3"><a href="javascript:slideFolio(3);" class="liinternal">3</a></li>
</ul>

[acoder]

The current number would be whichever has class "current", so next would be col+1 and previous would be col-1

[empiresolutions]

@acoder - thanks for your comment, but i all ready got that part of it!

This part of the code is working

<script language="Javascript">
<!--
var col='';
var colMin='';
var colMax='';

function slideFolio(direction){

	if (direction=='p') { col = col - 1; }
	if (direction=='n') { col = col + 1; }
	if (col > colMax) { col = colMin; }
	else if (col < colMin) { col = colMax; }

	var x = ((col-1)*-505)
	var folioChange = new Fx.Tween('folio', {duration:2000});
	folioChange.start('left',x);
	var cur = "trigger"+col;
	$(cur).addClass('current');

	for (i=1;i<=8;i++){
		var loopLI = "trigger"+i;
		if (cur==loopLI){}else{
			$(loopLI).removeClass('current');
		}
	}

}
//-->
</script>

but the HTML is not correct. the "trigger" is not right.

<ul class="nums">
<li id="trigger1" class="current"><a href="javascript:slideFolio('p');" class="liinternal">Previous</a></li>
<li id="trigger2"><a href="javascript:slideFolio('n');" class="liinternal">Next</a></li>
</ul>

[acoder]

The col(Min/Max) variables should be integers. You don't need the code from lines 17-25 because they just set the class of the list element (which is no longer required).

[empiresolutions]

I think the 17-25 is needed though. Without it how does the script know where to slide to? With your suggestions the Next does nothing till the 2nd click then it jumps till there is no content.

[empiresolutions]

ok got it. thanks for your help. Here is my finished code.

JavaScript

<script language="Javascript">
<!--
var col=1; // always 1
var colMin=1; // always 1
var colMax=7; // max columns

function slideFolio(direction){

	if (direction=='p' && col > 0) { col = col - 1; }
	if (direction=='n') { col = col + 1; }

	if (col > colMax) { col = colMin; }
	else if (col < colMin) { col = colMax; }

	var x = ((col-1)*-505);
	var folioChange = new Fx.Tween('folio', {duration:2000});
	folioChange.start('left',x);
}
//-->
</script>

HTML

<a href="javascript:slideFolio('p');" class="liinternal">Previous</a></li>
<a href="javascript:slideFolio('n');" class="liinternal">Next</a></li>

[acoder]

Yes, that's similar to what I was thinking. Glad you got it working.