Dec 03 2010

Slider for mootools 1.2

Category: Código,Javascript,Tutorialguillem @ 11:51 AM

Using Antonio Lupetti’s awesome tutorial and code on his post ‘Ultra versatile slider for websites‘, I did some arrangement to allow it to work with mootools 1.2, because a few things have changed on this version (specially on FX class).

Just to give you an idea, the script can is used to create a slider in an easy way, so when we have a lot of elements in a row and we can only display a few of them, we can slide the ones we are viewing and show other ones.

Let’s see how it works:

HTML Code

You just need to create a div which is going to contain our element list (which we will obviously code as an HTML list). This will be the div which will have the ability to slide based on its ID:

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

Then, we should choose a convenient location on the website to place the buttons to forward and go back on the list, keeping special attention to the ID’s on the button links because the script is going to use them as reference::

<br />
<a id="previous" href="#">Previous</a> | <a id="next" href="#">Next</a><br />

CSS Code

In here you have to pay special attention not to forget the overflow: hidden and to define the slider-list with enough width so all the blocks can fit. The maths should be like this:

Width = ( ( slider-list li width) + (slider-list li padding) + (slider-list li margin) ) * num of elements on list

<br />
#slider-stage {<br />
width: 632px;<br />
overflow: hidden;<br />
height: 200px;<br />
margin: 0 auto;<br />
}<br />
#slider-list {<br />
width: 2000px;<br />
border: 0;<br />
margin: 0;<br />
padding: 0;<br />
left: 400px;<br />
}<br />
#slider-list li {<br />
list-style: none;<br />
margin: 0;<br />
padding: 0;<br />
border: 0;<br />
margin-right: 4px;<br />
padding: 4px;<br />
background: #ddd;<br />
float: left;<br />
width: 200px;<br />
height: 200px;<br />
}<br />

Javascript code

First you have to include the mootoools javascript code on top of the page if you haven’t done so. Then you just get this code inside a js and include it on your html or you just copy it directly on the code.

<br />
<script type="text/javascript">// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
  window.addEvent( 'domready', function() {
    // Declaring increment vars
    var totInc = 0;
    // Increment = Box size (width+padding left/right+margin left/right)
    var inc = 212;
    // Max Right Increment = Increment * (- Non Visible elements) (this is negative)
    var maxRightInc = inc*(-3);
    // FX var
    var fx = new Fx.Morph( 'slist', { duration: 500, transition: Fx.Transitions.Back.easeInOut, link: 'cancel' });
    // Previous Button
    $('sprevious').addEvents( {
      'click' : function( event )
      {
        if ( totInc < 0 )         {           totInc = totInc + inc;           fx.start( { 'margin-left': totInc } );         }       }     });          // Next Button     $('snext').addEvents( {       'click' : function( event )       {         if ( totInc > maxRightInc )
        {
          totInc = totInc - inc;
          fx.start({ 'margin-left': totInc });
        }
      }
    });
  });
// ]]></script><br />

The important snipperts are:

inc = Width of the boxes we are going to show (width+padding left/right+margin left/right)
maxRightInc = inc * (-number of non visible elements (negative value))

So this way, if we have 6 elements and we are showing 3 at once, the maxRightInce should show inc*(-3)

That’s all, hope you enjoy it!

Tags: , ,

2 Responses to “Slider for mootools 1.2”

  1. dhamaso says:

    gracias por la explicacion, pero oye no podrias poner un ejemplo en funcionamiento

  2. guillem says:

    Creo que en la web que menciono al principio de la que saqué el slider original tiene un ejemplo. En cualquier caso puedes ver un ejemplo funcionando en http://www.scannerfm.com/player2011/ en el apartado de podcast.

    Saludos!

Leave a Reply