Jump to content

[SOLVED] Alter Carousel Script for Next Previous


cesarcesar

Recommended Posts

I'm trying to slightly alter the script found here, http://www.adrianhodge.com/web-design/mootools-horizontal-div-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>

Solution:

 

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');">Previous</a></li>
<a href="javascript:slideFolio('n');">Next</a></li>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.