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:

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

CSS Styles:

*{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:&quot;Courier New&quot;, Courier, monospace;
}
.site img{padding:2px;border:1px solid #CCC}
.site span{display:block}

Javascript Function:

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

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

Next/Previous Navigation

Live Demo

HTML Code:

&lt;div id=&quot;prev&quot; class=&quot;button&quot;&gt;&lt;/div&gt;
&lt;div id=&quot;mask&quot;&gt;
  &lt;div id=&quot;folio&quot;&gt;
    &lt;div class=&quot;col&quot;&gt;
      &lt;div class=&quot;site&quot;&gt;
        &lt;h3&gt;adra&lt;/h3&gt;
        &lt;a href=&quot;http://www.adra.org.nz&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;http://hodgeman.co.nz/images/portfolio_web_adra.gif&quot; border=&quot;0&quot; /&gt;
        &lt;span&gt;www.adra.org.nz&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class=&quot;site&quot;&gt;
        &lt;h3&gt;adrian hodge&lt;/h3&gt;
        &lt;a href=&quot;http://www.adrianhodge.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;http://hodgeman.co.nz/images/portfolio_web_adrian.gif&quot; border=&quot;0&quot; /&gt;
        &lt;span&gt;www.adrianhodge.com&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class=&quot;site&quot;&gt;
        &lt;h3&gt;bienetre&lt;/h3&gt;
        &lt;a href=&quot;http://www.bienetre.co.nz&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;http://hodgeman.co.nz/images/portfolio_web_bienetre.gif&quot; border=&quot;0&quot; /&gt;
        &lt;span&gt;www.bienetre.co.nz&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class=&quot;site&quot;&gt;
        &lt;h3&gt;billsblog&lt;/h3&gt;
        &lt;a href=&quot;http://www.billsblog.co.nz&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;http://hodgeman.co.nz/images/portfolio_web_billsblog.gif&quot; border=&quot;0&quot; /&gt;
        &lt;span&gt;www.billsblog.co.nz&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col&quot;&gt;
      &lt;div class=&quot;site&quot;&gt;
        &lt;h3&gt;cablesearch&lt;/h3&gt;
        &lt;a href=&quot;http://www.cablesearch.co.nz&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;http://hodgeman.co.nz/images/portfolio_web_cablesearch.gif&quot; border=&quot;0&quot; /&gt;
        &lt;span&gt;www.cablesearch.co.nz&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class=&quot;site&quot;&gt;
        &lt;h3&gt;delectable&lt;/h3&gt;
        &lt;a href=&quot;http://www.delectable.co.nz&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;http://hodgeman.co.nz/images/portfolio_web_delectable.gif&quot; border=&quot;0&quot; /&gt;
        &lt;span&gt;www.delectable.co.nz&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class=&quot;site&quot;&gt;
        &lt;h3&gt;farmmap&lt;/h3&gt;
        &lt;a href=&quot;http://www.fmsl.co.nz&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;http://hodgeman.co.nz/images/portfolio_web_farmmap.gif&quot; border=&quot;0&quot; /&gt;
        &lt;span&gt;www.fmsl.co.nz&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class=&quot;site&quot;&gt;
        &lt;h3&gt;fionahodge&lt;/h3&gt;
        &lt;a href=&quot;http://www.fionahodge.com&quot; target=&quot;_blank&quot;&gt;
        &lt;img src=&quot;http://hodgeman.co.nz/images/portfolio_web_fionahodge.gif&quot; border=&quot;0&quot; /&gt;
        &lt;span&gt;www.fionahodge.com&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;next&quot; class=&quot;button&quot;&gt;&lt;/div&gt;

CSS Styles:

*{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:&quot;Courier New&quot;, Courier, monospace;
}
.site img{padding:2px;border:1px solid #CCC}
.site span{display:block}

Javascript Function:

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&gt;0){
			currentCol -= 1;
			var x = (currentCol*-505);
			folioChange.start('left',x);
		}
	});
	
	$('next').addEvent('click', function(){
		if(currentCol&lt;columns.length-1){
			currentCol += 1;
			var x = (currentCol*-505);
			folioChange.start('left',x);
		}
	});
	
});

22 thoughts on “Mootools horizontal DIV slider”

  1. 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?

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

    so it scrolls from top to bottom instead of left to right?

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

  4. Hi,

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

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

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

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

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

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

  10. It’s funny to find out how many blogs the internet has on this subject! I don’t know if I will ever need to come back here, but it is awesome to know I found the one that offers a lot of practical info if this ever comes up for me another time.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>