This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Tuesday, January 20, 2009

Ultra versatile slider for websites

After my previous post about the Art of reusing code in your web projects I received many messages which asked to me to release an improved version of the slider I illustrated in the example number 3 of that post.

So, in this tutorial I'll explain a simple step-by-step way to implement an ultra versatile slider with horizontal scrolling and animated effects using MooTools. This is a basic proposal you can improve how you prefer. I included a link to the source code you can customize and reuse quickly in your web projects. The result is something like this:



Take a look at the live preview and download the source code.



Download the source code Live preview


HTML structure
HTML structure is very simple. We need a layer (DIV) and a simple list (UL). First step:create a layer which is the container of slider content:


Add this code:

<div id="slider-stage">
</div>

Simply, no? Now you have to add some elements (boxes) into that container using a simple <ul> list and some <li> elements. You have to set #slider-stage width to a certain value (for example 600px) and use owerflow property to create a "mask" like the following:



In this way you have a visible area and an invisible area. To set overflow property take a look at the next step which defines CSS properties. So...this is the code for the list:

<div id="slider-stage">
<ul id=
"myList">
<li >Box 1</li>
<li >Box 2</li>
<li >Box 3</li>
<li >Box 4</li>
<li >Box 5</li>
<li >Box 6</li>
</ul>
</div>


You can add all boxes you want simply adding a new <li> element in the previous code. Within each <li> element you can add all you want (text, images, videos...)
Now, after the previous code, add buttons to slide content to left or right using this code:

<div id="slider-buttons">
<a href="#" id="previous">Previous</a> | <a href="#" id="next">Next</a&gt;
</div>

Make attention do not change the name of buttons ID property (previous and next)!


CSS Code
Now take a look at CSS code. How I said you have to use overflow property to create a "layer mask" and hide all content (list elements) external to the container #slider-stage. More over take a mind this in order to set #slider-stage width:



If you have 3 visible boxes in your slider to set #slider-stage width you have to consider the box widht, padding and margin-left. So, #slider-stage width will be:

(box width * 3) + (box padding*3) + (box margin-right *2)

In the following case #slider-stage width is 632px (200*3 + 4*2*3 + 4*2):

#slider-stage{
width:632px;
overflow:auto;
overflow-x:hidden;
overflow-y:hidden;
height:200px;
margin:0 auto;
}
#slider-list{
width:2000px;
border:0;
margin:0;
padding:0;
left:400px;
}
#slider-list li{
list-style:none;
margin:0;
padding:0;
border:0;
margin-right:4px;
padding:4px;
background:#DEDEDE;
float:left;
width:200px;
height:200px;
}


JavaScript Code
Now, take a look at this simple script to enable slider features. I used MooTools to implement this script so, you have to add this link into the <head> tag of the page where you want to use this slider:

<script type="text/javascript" src="mootools.svn.js">
</script>

Now, copy and paste this code below the previous line of code to enable scrolling features (you can also copy this file in an external Js file and import it into the page):

<script type="text/javascript">
window.addEvent('domready', function(){
// Declaring increment vars
var totIncrement = 0;
var increment = 212;
var maxRightIncrement = increment*(-6);
// FX var
var fx = new Fx.Style('slider-list', 'margin-left', {
duration: 500,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});

// Previous Button
$('previous').addEvents({
'click' : function(event){
if(totIncrement<0){
totIncrement = totIncrement + increment;
fx.stop()
fx.start(totIncrement);
}
});

// Next Button
$('next').addEvents({
'click' : function(event){
if(totIncrement>maxRightIncrement){
totIncrement = totIncrement - increment;
fx.stop()
fx.start(totIncrement);
}
}
})
});
</script>

If you have some familiarity with MooTools and JavaScript it will be very simple to understand:

var increment = 212;

...is the horizontal increment when you click the button previous or next. It's equal to the width of <li> element (200px) + padding (left + right = 4px+4px = 8px) + margin-right (4px).

var maxRightIncrement = increment*(-6);

...is the maximum increment from left to right. Why (-6)? Because I added 9 elements into the slider; default view display 3 elements each time; so to reach the element 9 you have to press the button "next" 6 times! Naturally you have to change this value if you change the number of <li> elements.

It's all! Take a look at the live preview or download the source code ready to use in your web porojects! Add a comment or send me a message if you have problems to implement it.

Download the source code Live preview

blog comments powered by Disqus
Mary said...

Great post! I like it!

Rob said...

Very cool, and a positive user experience as well. A+. I already know what site I want to use it on, but will be going vertical with it.

Jon said...

Great tutorial thanks. Keep up the good work... (The Acuras Blogger)

Mark said...

Nice tutorial bro! I learn a lot from this blog.

JAdan said...

Excelente tut. You deserve a trophy!

Anonymous said...

Another great tut and demo.

Thank you!

Dustin said...

How difficult would it be to make the slider return to the first li upon reaching the end of the the ul?

Ian said...

How's Digg treating ya?

Massimo said...

Great!

Pity it does not work on Konqueror :(

Ki said...

Is there a way you could have this slide the whole browser window? ie each box is the full screen inside the browser?

nasal said...

Great tutorial!

Just wanted to say the demo does not work for me (FF3), it shows a blank page..

Keep up your great woork!

Antoniojim said...

Muy bueno, me encanta este slider

Designer said...

very neat..... thanks a lot for sharing.

Felix said...

cool, usefull. Really good solution!

Anonymous said...

Great job antonio!
Very Usefull.

Rahul said...

Very cool effect. Thanks for the link.

Jesse said...

FYI, it's called a "carousel" design pattern, not a "slider." I've made the same mistake before. If you use the wrong terminology, people will get confused.

Anonymous said...

Great Tutorial and script.
But I think it would be great to use a pagination instead of the prev and next buttons. (:
Anybody who can do this?

Abdel Olakara said...

Great Script! Thanks.. :) Keep up the good work

TALHA said...

Those who are looking for different versions check; http://www.dyn-web.com/code/scroll/horiz.php

Lee said...

Very nice and simple. Yes, it would be great if it had a pagination navigation.

Jamp Mark said...

Simple and functional. I like the tutorial. It's nice. Thanks.

Blogger Tutorial said...

Superb piece of work, you truly deserve "Job well done"

Anonymous said...

Hi very nice. I will use it for my foto gallery. But my problem is i use also Lightbox for open the bigger pictures. Now when i acctivated your script, lightbox dont running. He will open the pictures in a new window, thats not so fine. Has anyone any ideas?

arshad said...

you can add one more feature like after the last list is reached you can make it revert back to the first one again [using the following assignment to next button when totIncrement is less than maxRightIncrement]:

totIncrement = 0;


thanks a lot Antonio :)

Stefano said...

Thanks Antonio for this simple yet powerful tutorial!

I tweaked it just for learning and, in half an hour I came up with this simple slideshow.

Ciao! :)

Stefano

Alvin said...

Hi,
Thanks for this tutorial but unfortunately is for an Mootools 1.1

Can you please take the time to make it for Mootools 1.2

SugarDaddy said...

There's just 1 problem for me : the a tag with a # get the page to the top when clicking on navigation links if the carousel is bottomed.

Ralph said...

great idea. Thank you for your great post, again. Ralph

Weber said...

Is there a way to make it autoscroll?

Anonymous said...

I'm trying to chain this script to scroll 2 seperate boxes (photos and info) when i click the buttons, but i can't it to work. Can someone give me a hint?

Denzyl said...

Great tutorial - few questions though:

1. Can someone explain the myList left=400px and width=2000px? Where do those numbers come from? What do they affect?

2. I'm trying to use this inside of another div with a background image, but it won't show the slider-buttons. Any reason why? I take the image out, and the buttons show up. Doesn't make any sense to me.

Thanks!

Anonymous said...

Hi thanks for this nice slider, one question is it possible to combine this script with Slimbox or Lightbox? I try it but then one of this script will not run.

I want use this script for a Photogallery, and when i click on a photo he open it in a new window. This isnt very nice, so i hope it will give a solution to open the bigger Photo on the same site. For example wit ligthbox together.

Thanks for tips an help.

akbey said...

very nice sharing.

Christa said...

Thank you! I have been looking for something simple like this for a while.

Matthew said...

I wanted to make it easier to scroll, so i added two images a left and right, then changed the click command to mouseenter so on hover it will scroll that direciton. I used a table for placement, but i am sure it would be easy to change with CSS


// EVENTS for the button "previous"
$('previous').addEvents({
'mouseenter' : function(event){
if(totIncrement<0){
totIncrement = totIncrement+increment;
fx.stop()
fx.start(totIncrement);
}
}
});

//-------------------------------------
// EVENTS for the button "next"
$('next').addEvents({
'mouseenter' : function(event){
if(totIncrement>maxRightIncrement){
totIncrement = totIncrement-increment;
fx.stop()
fx.start(totIncrement);
}
}

Karen said...

Very nice carousel gallery. BUT does anyone know how to fix the Previous/Next Js code so that the page does not Jump back to the top of the page.
One could put a note to view this page/window in full screen but would be nice to have the page not jump.
Viewing in FFox.

Monkeytail said...

MooTools 1.2 style!

see pastie

Anonymous said...

Please, it's possible with autoscroll without click on prev and next? thanx

Nickb said...

Just wanted to add to MonkeyTails pastie for Mootools 1.2
Add a fx.pause(); for both next and previous click events after inc/decrementing and before the start of the next effect.

This handles multiple clicks without it screwing it badly...

nix.

Joe said...

Question :

Does anyone know how to jump from 'box' to box. Such as have a link out side the viewer and have it control what box is displayed?

Kinda like this did : http://www.hillsong.com

Many thanks,

J5

Lion said...

Two questions:
1. How to implement a "First" and "Last" links?
2. Ho to fire up "click" events (for "next" and "previous") from another JS function?
getElementById('next').click() works fine in IE, but f**fox doesn't see it.
Thanks!

roroland said...

it's possible with autoscroll without click on prev and next? PLEASE !!!!!!

Anonymous said...

Excellent explanation. And also, same question as Joe. ¿Is it too difficult to have more than two buttons and navigate exactly to one box? (http://www.hillsong.com )

Thanks again

Anonymous said...

Found an autoscroll carousel w/o prev-next buttons here: www.latenight-coding.com/mootools/classes/qscroller.html for anyone interested.

DadandMe said...

Fyi:

If your page is more than one page long (i.e, if it extends beyond the first page ( if you have a vertical scroll bar)), this code acts weird. After every click on the next or previous button, it will take you to the top of the page.

Shichibukai said...

Love the scripts..

Has anyone figured out how to make it work with lightbox?

<>alex<> said...

to stop the href event must add:

new Event(event).stop();

in the click function .... :
$('next').addEvents({
'click' : function(event){
new Event(event).stop();
if(totIncrement>maxRightIncrement){
totIncrement = totIncrement-increment;
fx.stop()
fx.start(totIncrement);
}
}
})

thanks, for the code!
alexgenovese

Anonymous said...

Does anyone know how to jump from 'box' to box. Such as have a link out side the viewer and have it control what box is displayed?

http://www.hillsong.com

Thanks

Robert said...

Hi Antonio,

first of all that's a great Script.

But, as Karen and DadandMe already asked.
How can I fixed the jump to the top of the page.

Thank you in advance

Robert

Anonymous said...

How to makes it work with a lightbox please ?
It works with mozilla but not with ie6+.

Thanks a lot

Anonymous said...

it have conflict with mootools 1.2.2

Shichibukai said...

Does anyone else experience choppy scrolling in FF?

Anonymous said...

No feedback on the lightbox? Whichever code comes first disables the other. E.g. if I put the Carousel code first, it works and vice-versa.

No ideas??

Stefano said...

@lion here you can find the code for implementing the 'First' and 'Last' links into the Monkeytail's (mootools 1.2) script version

http://pastie.org/513842

Cheers!

Stefano

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News