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 previewHTML 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:
<div id="slider-stage">
</div>
</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">
</div>
<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><li >Box 2</li>
<li >Box 3</li>
<li >Box 4</li>
<li >Box 5</li>
<li >Box 6</li>
</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>
</div>
<a href="#" id="previous">Previous</a> | <a href="#" id="next">Next</a>
</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;
}overflow:auto;
overflow-x:hidden;
overflow-y:hidden;
height:200px;
margin:0 auto;
#slider-list{
#slider-list li{
width:2000px;
border:0;
margin:0;
padding:0;
left:400px;
}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;
}
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>
</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
});
});
</script>// 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);
}
}
}) $('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);
}
}
});
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
0 comments