JavaScript Forum

**empiresolutions** · 02-11-2009, 05:58 AM

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

Code:

<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

Code:

<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>

**empiresolutions** · 02-11-2009, 07:38 AM

Solution:

JavaScript

Code:

<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

Code:

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