JAVASCRIPT   39

easySlider

Guest on 10th July 2022 08:08:37 PM

  1. /*
  2.  *      Easy Slider 1.5 - jQuery plugin
  3.  *      written by Alen Grakalic       
  4.  *      http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
  5.  *
  6.  *      Copyright (c)  Alen Grakalic (http://cssglobe.com)
  7.  *      Dual licensed under the MIT (MIT-LICENSE.txt)
  8.  *      and GPL (GPL-LICENSE.txt) licenses.
  9.  *
  10.  *      Built for jQuery library
  11.  *      http://jquery.com
  12.  *
  13.  */
  14.  
  15. /*
  16.  *      markup example for $("#slider").easySlider();
  17.  *     
  18.  *      <div id="slider">
  19.  *              <ul>
  20.  *                      <li><img src="images/01.jpg" alt="" /></li>
  21.  *                      <li><img src="images/02.jpg" alt="" /></li>
  22.  *                      <li><img src="images/03.jpg" alt="" /></li>
  23.  *                      <li><img src="images/04.jpg" alt="" /></li>
  24.  *                      <li><img src="images/05.jpg" alt="" /></li>
  25.  *              </ul>
  26.  *      </div>
  27.  *
  28.  */
  29.  
  30. (function($) {
  31.  
  32.         $.fn.easySlider = function(options){
  33.          
  34.                 // default configuration properties
  35.                 var defaults = {                       
  36.                         prevId:                 'prevBtn',
  37.                         prevText:               '',
  38.                         nextId:                 'nextBtn',     
  39.                         nextText:               '',
  40.                         controlsShow:   true,
  41.                         controlsBefore: '',
  42.                         controlsAfter:  '',    
  43.                         controlsFade:   true,
  44.                         firstId:                'firstBtn',
  45.                         firstText:              'First',
  46.                         firstShow:              false,
  47.                         lastId:                 'lastBtn',     
  48.                         lastText:               'Last',
  49.                         lastShow:               false,                         
  50.                         vertical:               false,
  51.                         speed:                  800,
  52.                         auto:                   false,
  53.                         pause:                  5000,
  54.                         continuous:             false
  55.                 };
  56.                
  57.                 var options = $.extend(defaults, options);  
  58.                                
  59.                 this.each(function() {  
  60.                         var obj = $(this);                             
  61.                         var s = $("li", obj).length;
  62.                         var w = $("li", obj).width();
  63.                         var h = $("li", obj).height();
  64.                         obj.width(w);
  65.                         obj.height(h);
  66.                         obj.css("overflow","hidden");
  67.                         var ts = s-1;
  68.                         var t = 0;
  69.                         $("ul", obj).css('width',s*w);                 
  70.                         if(!options.vertical) $("li", obj).css('float','left');
  71.                        
  72.                         if(options.controlsShow){
  73.                                 var html = options.controlsBefore;
  74.                                 if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
  75.                                 html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
  76.                                 html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
  77.                                 if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
  78.                                 html += options.controlsAfter;                                         
  79.                                 $(obj).after(html);                                                                            
  80.                         };
  81.        
  82.                         $("a","#"+options.nextId).click(function(){            
  83.                                 animate("next",true);
  84.                         });
  85.                         $("a","#"+options.prevId).click(function(){            
  86.                                 animate("prev",true);                          
  87.                         });    
  88.                         $("a","#"+options.firstId).click(function(){           
  89.                                 animate("first",true);
  90.                         });                            
  91.                         $("a","#"+options.lastId).click(function(){            
  92.                                 animate("last",true);                          
  93.                         });            
  94.                        
  95.                         function animate(dir,clicked){
  96.                                 var ot = t;                            
  97.                                 switch(dir){
  98.                                         case "next":
  99.                                                 t = (ot>=ts) ? (options.continuous ? 0 : ts) : t+1;                                            
  100.                                                 break;
  101.                                         case "prev":
  102.                                                 t = (t<=0) ? (options.continuous ? ts : 0) : t-1;
  103.                                                 break;
  104.                                         case "first":
  105.                                                 t = 0;
  106.                                                 break;
  107.                                         case "last":
  108.                                                 t = ts;
  109.                                                 break;
  110.                                         default:
  111.                                                 break;
  112.                                 };     
  113.                                
  114.                                 var diff = Math.abs(ot-t);
  115.                                 var speed = diff*options.speed;                                        
  116.                                 if(!options.vertical) {
  117.                                         p = (t*w*-1);
  118.                                         $("ul",obj).animate(
  119.                                                 { marginLeft: p },
  120.                                                 speed
  121.                                         );                             
  122.                                 } else {
  123.                                         p = (t*h*-1);
  124.                                         $("ul",obj).animate(
  125.                                                 { marginTop: p },
  126.                                                 speed
  127.                                         );                                     
  128.                                 };
  129.                                
  130.                                 if(!options.continuous && options.controlsFade){                                       
  131.                                         if(t==ts){
  132.                                                 $("a","#"+options.nextId).hide();
  133.                                                 $("a","#"+options.lastId).hide();
  134.                                         } else {
  135.                                                 $("a","#"+options.nextId).show();
  136.                                                 $("a","#"+options.lastId).show();                                      
  137.                                         };
  138.                                         if(t==0){
  139.                                                 $("a","#"+options.prevId).hide();
  140.                                                 $("a","#"+options.firstId).hide();
  141.                                         } else {
  142.                                                 $("a","#"+options.prevId).show();
  143.                                                 $("a","#"+options.firstId).show();
  144.                                         };                                     
  145.                                 };                             
  146.                                
  147.                                 if(clicked) clearTimeout(timeout);
  148.                                 if(options.auto && dir=="next" && !clicked){;
  149.                                         timeout = setTimeout(function(){
  150.                                                 animate("next",false);
  151.                                         },diff*options.speed+options.pause);
  152.                                 };
  153.                                
  154.                         };
  155.                         // init
  156.                         var timeout;
  157.                         if(options.auto){;
  158.                                 timeout = setTimeout(function(){
  159.                                         animate("next",false);
  160.                                 },options.pause);
  161.                         };             
  162.                
  163.                         if(!options.continuous && options.controlsFade){                                       
  164.                                 $("a","#"+options.prevId).hide();
  165.                                 $("a","#"+options.firstId).hide();                             
  166.                         };                             
  167.                        
  168.                 });
  169.          
  170.         };
  171.  
  172. })(jQuery);

Raw Paste


Login or Register to edit or fork this paste. It's free.