/    Sign up×
Community /Pin to ProfileBookmark

Alter Carousel Script for Next Previous

I’m trying to slightly alter the script found here, [url]http://www.adrianhodge.com/web-design/mootools-horizontal-div-slider-121/[/url].

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>[/CODE]

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>[/CODE]

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@cesarcesarauthorFeb 11.2009 — Solution:

JavaScript
&lt;script language="Javascript"&gt;
&lt;!--
var col=1; // always 1
var colMin=1; // always 1
var colMax=7; // max columns

function slideFolio(direction){

<i> </i>if (direction=='p' &amp;&amp; col &gt; 0) { col = col - 1; }
<i> </i>if (direction=='n') { col = col + 1; }

<i> </i>if (col &gt; colMax) { col = colMin; }
<i> </i>else if (col &lt; colMin) { col = colMax; }

<i> </i>var x = ((col-1)*-505);
<i> </i>var folioChange = new Fx.Tween('folio', {duration:2000});
<i> </i>folioChange.start('left',x);
}
//--&gt;
&lt;/script&gt;
HTML
&lt;a href="javascript:slideFolio('p');"&gt;Previous&lt;/a&gt;&lt;/li&gt;
&lt;a href="javascript:slideFolio('n');"&gt;Next&lt;/a&gt;&lt;/li&gt;
×

Success!

Help @cesarcesar spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...