This tutorial explains 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.
Ultra versatile slider for websites
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.
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>
</div>
Make attention do not change the name of buttons ID property (previous and next)!
CSS CodeNow
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!
|
