[APORTE] Slider sencillo con Mootools 1.2.4

[jackson666]

Buenasss gente que tal.

Hace rato ya que venia con ganas de hacer algo asi, por mas sencillo que sea, simplifica bastante codigo y es simple de usar =).

Es un slider super sencillo hecho con la ultima version de mootools, que se puede descargar aqui.

Para ver un ejemplo en funcionamiento click aqui

Pongo el codigo y explico su funcionamiento:

1) Para su correcto funcionamiento se debe agregar la siguiente linea antes del siguiente script

Código Javascript:

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

Demas esta decir, que el src varia segun donde tengan ubicado el framework...

slider.js

Código Javascript:

var Slider = new Class({
    
            options: { 
                        duration: 1200, 
                        transition: 'linear', 
                        toggler: 'click',
                        mode: 'horizontal', 
                        auto: false, 
                        delay: false, 
                        stopElement: false, 
                        stopEvent: 'click'
                     },
            
            element: null, back: null, fwd: null, timer: null, 
            
            automatic: function(){
                    
                    var _this = this;
                    var contador = 0;
 
                    var func = function(){
 
                    _this.element.removeEvent(_this.options.toggler);
                    
                   // En realidad las dos comillas simples, no van
                    if(contador '%' 2 == 0){
                        
                    _this.element.addEvent(_this.options.toggler, function(ev){
                    _this.element.set('slide',{
                                              mode : _this.options.mode, 
                                              transition : _this.options.transition, 
                                              duration: _this.options.duration
                                             }).slide('out');
                    });
                    
                    }else{
                        
                        _this.element.addEvent(_this.options.toggler, function(ev){
                        _this.element.slide('in');
                        
                        });
                        
                    }                    
                    
                    _this.element.fireEvent(_this.options.toggler);
                    
                    contador++;
                        
                    }
                    
                    _this.timer = func.periodical(_this.options.delay);                    
                    
            },
            
            setStopper: function(){
 
                var _this = this;
                
                $(_this.options.stopElement).addEvent(_this.options.stopEvent, function(){
                    
                    $clear(_this.timer);
                    
                });
                
            },
            
            initialize: function(elementID, backButtonID, fwdButtonID, config){
                
                    var _this = this;
 
                    if($type(elementID)){ _this.element = $(elementID); }else{ return false; }
                    if(!$type(backButtonID)){ _this.back = $(elementID); }else{ _this.back = $(backButtonID); }
                    if(!$type(fwdButtonID)){ _this.fwd = $(elementID); }else{ _this.fwd = $(fwdButtonID); }
                    
                    if($type(config) == 'object'){
                        for(var i in _this.options){
                            _this.options[i] = config[i];
                        }
                    }
                    
                    if(_this.options.auto == true && $type(_this.options.delay) == 'number'){
                        
                        if(_this.options.stopElement){
                            _this.setStopper();
                        }
                        _this.automatic();
                        
                    }else{
                        _this.back.addEvent( _this.options.toggler, function(ev){
                        ev.stop();
                        _this.element.set('slide',{
                                                  mode : _this.options.mode, 
                                                  transition : _this.options.transition, 
                                                  duration: _this.options.duration
                                                 }).slide('out');
                        });
                        
                        _this.fwd.addEvent(_this.options.toggler, function(ev){
                        ev.stop();
                        _this.element.slide('in');
                        });
                    }
            } 
            
});