Mootools horizontal DIV slider

This is an update to the original Mootools horizontal DIV slider I wrote back in December of 2007.
It now uses the Mootools 1.2.3 Core and Fx.Slide from the More build.

LATEST UPDATED: It now comes in two flavors, the original unordered list navigation and now the new next/previous buttons.

Unordered List Navigation

Live Demo

HTML Code:

[sourcecode language=”xml”]
<ul class="nums">
<li class="current" id="trigger1">
<a class="liinternal" href="javascript:slideFolio(1);">1</a>
</li>
<li id="trigger2">
<a class="liinternal" href="javascript:slideFolio(2);">2</a>
</li>
</ul>
<div id="mask">
<div id="folio">
<div class="col">
<div class="site">
<h3>adra</h3>
<a href="http://www.adra.org.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_adra.gif" border="0" /><span>www.adra.org.nz</span></a>
</div>
<div class="site">
<h3>adrian hodge</h3>
<a href="http://www.adrianhodge.com" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_adrian.gif" border="0" /><span>www.adrianhodge.com</span></a>
</div>
<div class="site">
<h3>bienetre</h3>
<a href="http://www.bienetre.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_bienetre.gif" border="0" /><span>www.bienetre.co.nz</span></a>
</div>
<div class="site">
<h3>billsblog</h3>
<a href="http://www.billsblog.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_billsblog.gif" border="0" /><span>www.billsblog.co.nz</span></a>
</div>
</div>
<div class="col">
<div class="site">
<h3>cablesearch</h3>
<a href="http://www.cablesearch.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_cablesearch.gif" border="0" /><span>www.cablesearch.co.nz</span></a>
</div>
<div class="site">
<h3>delectable</h3>
<a href="http://www.delectable.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_delectable.gif" border="0" /><span>www.delectable.co.nz</span></a>
</div>
<div class="site">
<h3>farmmap</h3>
<a href="http://www.fmsl.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_farmmap.gif" border="0" /><span>www.fmsl.co.nz</span></a>
</div>
<div class="site">
<h3>fionahodge</h3>
<a href="http://www.fionahodge.com" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_fionahodge.gif" border="0" /><span>www.fionahodge.com</span></a>
</div>
</div>
</div>
</div>
[/sourcecode]
CSS Styles:
[sourcecode language=”css”]
*{margin:0;padding:0}
body{margin:20px}
ul.nums{float:left;width:100%;margin-bottom:10px}
ul.nums li {
border:1px solid #333333;
float:left;
font-weight:bold;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0 5px 0 0;
text-align:center;
}
ul.nums span {
float:left;
font-weight:bold;
line-height:25px;
margin:0 5px 0 0;
}
ul.nums li a {
color:#666666;
display:block;
padding:3px;
text-decoration:none;
width:15px;
}
ul.nums li a:hover {
background-color:#DDDDDD;
}
ul.nums li.current {
background-color:#B2A384;
}
ul.nums li.current a {
color:#FFFFFF;
}
ul.nums li.current a:hover {
background-color:#B2A384;
}
#mask {
width:505px;
height:305px;
overflow:hidden;
border:1px solid #666;
position:relative;
background-color:#999;
float:left;
}
#folio {
position:absolute;
top:0;
left:0;
width:3535px;
float:left;
}
.col {
display:block;
width:505px;
height:305px;
float:left;
}
.site {
width:233px;
height:133px;
float:left;
padding:5px;
margin:5px 0 0 5px;
border:1px solid #666;
background-color:#FFF;
font-size:11px;
font-family:"Courier New", Courier, monospace;
}
.site img{padding:2px;border:1px solid #CCC}
.site span{display:block}
[/sourcecode]
Javascript Function:
[sourcecode language=”js”]
function slideFolio(col){
var x = ((col-1)*-505)
var folioChange = new Fx.Tween(‘folio’, {duration:1000});
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’);
}
}
}
[/sourcecode]

Next/Previous Navigation

Live Demo

HTML Code:

[sourcecode language=”xml”]
<div id="prev" class="button"></div>
<div id="mask">
<div id="folio">
<div class="col">
<div class="site">
<h3>adra</h3>
<a href="http://www.adra.org.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_adra.gif" border="0" />
<span>www.adra.org.nz</span></a>
</div>
<div class="site">
<h3>adrian hodge</h3>
<a href="http://www.adrianhodge.com" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_adrian.gif" border="0" />
<span>www.adrianhodge.com</span></a>
</div>
<div class="site">
<h3>bienetre</h3>
<a href="http://www.bienetre.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_bienetre.gif" border="0" />
<span>www.bienetre.co.nz</span></a>
</div>
<div class="site">
<h3>billsblog</h3>
<a href="http://www.billsblog.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_billsblog.gif" border="0" />
<span>www.billsblog.co.nz</span></a>
</div>
</div>
<div class="col">
<div class="site">
<h3>cablesearch</h3>
<a href="http://www.cablesearch.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_cablesearch.gif" border="0" />
<span>www.cablesearch.co.nz</span></a>
</div>
<div class="site">
<h3>delectable</h3>
<a href="http://www.delectable.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_delectable.gif" border="0" />
<span>www.delectable.co.nz</span></a>
</div>
<div class="site">
<h3>farmmap</h3>
<a href="http://www.fmsl.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_farmmap.gif" border="0" />
<span>www.fmsl.co.nz</span></a>
</div>
<div class="site">
<h3>fionahodge</h3>
<a href="http://www.fionahodge.com" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_fionahodge.gif" border="0" />
<span>www.fionahodge.com</span></a>
</div>
</div>
</div>
</div>
<div id="next" class="button"></div>
[/sourcecode]

CSS Styles:
[sourcecode language=”css”]
*{margin:0;padding:0}
body{margin:20px}
.button{width:50px;height:305px;float:left;border:1px solid #666;cursor:pointer;background:url(buttons.jpg) no-repeat}
#next{margin-left:10px;background-position:center right}
#prev{margin-right:10px;background-position:center left}
#mask {
width:505px;
height:305px;
overflow:hidden;
border:1px solid #666;
position:relative;
background-color:#999;
float:left;
}
#folio {
position:absolute;
top:0;
left:0;
width:3535px;
float:left;
}
.col {
display:block;
width:505px;
height:305px;
float:left;
}
.site {
width:233px;
height:133px;
float:left;
padding:5px;
margin:5px 0 0 5px;
border:1px solid #666;
background-color:#FFF;
font-size:11px;
font-family:"Courier New", Courier, monospace;
}
.site img{padding:2px;border:1px solid #CCC}
.site span{display:block}
[/sourcecode]

Javascript Function:
[sourcecode language=”js”]
window.addEvent(‘domready’, function(){

var currentCol = 0;
var folioChange = new Fx.Tween(‘folio’, {duration:1000});
var columns = $$(‘div.col’);

$(‘prev’).addEvent(‘click’, function(){
if(currentCol>0){
currentCol -= 1;
var x = (currentCol*-505);
folioChange.start(‘left’,x);
}
});

$(‘next’).addEvent(‘click’, function(){
if(currentCol<columns.length-1){
currentCol += 1;
var x = (currentCol*-505);
folioChange.start(‘left’,x);
}
});

});
[/sourcecode]

21 comments

phynias says:

May 22, 2009 at 7:29 pm

im using this on my site and it works great my only problem is when the number of pages gets large they numbers go on forever. can you suggest a way to make a dynamic nav bar. so it only shows x number of buttons and then wraps as you click?
Adrian Hodge says:

May 23, 2009 at 12:50 pm

Hi phynias, so you want a limit on the number of buttons and show next/previous for other ‘groups’ of buttons?
You could always have just next/previous buttons instead of numbered buttons?

Clientcide offer a great layout library called ‘Simple Carousel’ which is just awesome.
http://www.clientcide.com/wiki/cnet-libraries/08-layout/03-simplecarousel
SK says:

June 17, 2009 at 8:42 pm

Hey, any way to make a Next/Previous link instead of numbered pagination?
Adrian Hodge says:

June 22, 2009 at 1:33 am

Yeah, there will be, just give me another day or two, my wife just had our second child, so kinda tied up at the moment.
Adrian Hodge says:

June 25, 2009 at 1:38 pm

I’m snowed under with work, so cannot write a solution at the moment, this website has a great viewer class that I’ve used a few times, a much better solution than mine…

http://www.efectorelativo.net/laboratory/viewer/
AJ says:

September 30, 2009 at 4:34 am

Any headway on adding next/previous buttons?
Adrian Hodge says:

October 4, 2009 at 12:05 pm

Have updated to Mootools 1.2.3 Core and have split out the result into the two demos, with unordered list navigation or next, previous buttons.
John says:

October 20, 2009 at 2:18 am

is there any demo available for such a thing in verttical setting?

so it scrolls from top to bottom instead of left to right?
Adrian Hodge says:

October 20, 2009 at 11:29 pm

Hi John,

Try updating the javascript function to (untested):

window.addEvent(‘domready’, function(){

var currentCol = 0;
var folioChange = new Fx.Tween(‘folio’, {duration:1000});
var columns = $$(‘div.col’);

$(‘prev’).addEvent(‘click’, function(){
if(currentCol>0){
currentCol -= 1;
var y = (currentCol*-<>);
folioChange.start(‘top’,y);
}
});

$(‘next’).addEvent(‘click’, function(){
if(currentCol<columns.length-1){
currentCol += 1;
var y = (currentCol*-<>);
folioChange.start(‘top’,y);
}
});

});

You’ll also need to update the CSS folio style to be high rather than wide.
Let me know how you get on.
fsix says:

November 12, 2009 at 5:46 pm

Hi,

Love this btw! just had a question, is it possible to link to a specific ‘col’ set? like how an anchor would work?
Adrian Hodge says:

November 12, 2009 at 9:38 pm

With the unordered list navigation, you have links as the navigation, so I guess you mean with the Next/Previous button navigation?

Add the following function into the javascript:
function colJump(myCol){ var x = ((myCol-1)*-505); folioChange.start('left',x); }

And move it all down into the footer of the page before the closing

Then add your links like so:
<a href="colJump(1);" rel="nofollow">Column One</a>

I’ve created a test demo for you here.

Hope that helps some people.
fsix says:

November 13, 2009 at 9:21 am

Thanks for the speedy response! That was what I was looking for.
Justin says:

December 30, 2009 at 8:22 am

How can I make it so that each column has it’s own URL? So if you go to the web address: http://demo-slider.html#3 it will automatically go to the third column.

This would make it easier for people to bookmark pages.
Justin says:

December 30, 2009 at 8:29 am

I’ve got it. Here is the code: http://pastie.org/760381
Adrian Hodge says:

December 30, 2009 at 4:14 pm

Nice work Justin, thanks for sharing
Kidatheart says:

January 1, 2011 at 2:24 pm

Hi Adrian

I was Just wondering if I could use your sliding div on my website at http://www.Hightechhangout.com

I was Very Impressed by it ….

Just let me know if it’s ok use it …. 🙂

Thanks

Kidatheart
Adrian Hodge says:

January 4, 2011 at 8:19 pm

Sure thing KidatHeart, it’s there for anyone to use.
Kidatheart says:

January 5, 2011 at 10:11 am

Hey Adrian

Thats Cool and Thank you for let me use it on my website and I will post a link to your website in my view source code area and on my website page too somewhere……….

Thanks

Kid At Heart
kidatheart says:

February 1, 2012 at 4:08 pm

Hey Adrian

I have question for you….:)

I have been trying for a long time to make a multiple of div Sliders on one page and I can’t seem to figure it out ????? Do you know how to have more than one ” Div Slider” on a page ???

Thanks

Kidatheart
Adrian Hodge says:

February 2, 2012 at 3:47 pm

Hey Kidatheart

You could duplicate the javascript function and call another unique div ID. e.g.

function slideFolio1(col){
var x = ((col-1)*-505)
var folioChange = new Fx.Tween(‘folio1’, {duration:1000});
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’);
}
}
}

Change Fx.Tween(‘folio’..
to Fx.Tween(‘folio1’.. in the first function and
Fx.Tween(‘folio2’.. in the duplicate function.

Then make sure the first slider has the div id “folio1” and the second has the div id “folio2”
Call the sliders by slideFolio1(col) or slideFolio2(col).

This isn’t the best way to do it, but there are many other great mootools javascript div sliders out there.
kidatheart says:

February 5, 2012 at 12:03 pm

hey Adrian

Thanks for that help about it…

I’ll try that sometime soon here and i think that just might work 🙂 and thanks again for the help 🙂 …..

Kidatheart

Comments are closed.