title: Continous animation after clicking the next button using Easyslider 1.7
body: <p>Does anybody who has ever used this know how to get the slides to continue scrolling after clicking the next button? Currently if you click on 'next' button, they stay on that slide.</p>
  
  <p>My jQuery skills are slightly below average and I can't figure out myself if there is an easy way of doing it. Any help would be grand :)</p>
  
  <p>Easyslider is a jQuery plugin, Here is the JS:</p>
  
  <pre><code>(function($) {
  
  $.fn.easySlider = function(options){
  
      // default configuration properties
      var defaults = {            
          prevId:         'prevBtn',
          prevText:       'Previous',
          nextId:         'nextBtn',  
          nextText:       'Next',
          controlsShow:   true,
          controlsBefore: '',
          controlsAfter:  '', 
          controlsFade:   true,
          firstId:        'firstBtn',
          firstText:      'First',
          firstShow:      false,
          lastId:         'lastBtn',  
          lastText:       'Last',
          lastShow:       false,              
          vertical:       false,
          speed:          800,
          auto:           true,
          pause:          3000,
          continuous:     true, 
          numeric:        false,
          numericId:      'controls'
      }; 
  
      var options = $.extend(defaults, options);  
  
      this.each(function() {  
          var obj = $(this);              
          var s = $("li", obj).length;
          var w = $("li", obj).width(); 
          //var h = $("li", obj).height(); 
          var clickable = true;
          obj.width(w); 
          //obj.height(h); 
          obj.css("overflow","hidden");
          var ts = s-1;
          var t = 0;
          $("ul", obj).css('width',s*w);          
  
          if(options.continuous){
              $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
              $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
              $("ul", obj).css('width',(s+1)*w);
          };              
  
          if(!options.vertical) $("li", obj).css('float','left');
  
          if(options.controlsShow){
              var html = options.controlsBefore;              
              if(options.numeric){
                  html += '&lt;ol id="'+ options.numericId +'"&gt;&lt;/ol&gt;';
              } else {
                  if(options.firstShow) html += '&lt;span id="'+ options.firstId +'"&gt;&lt;a href=\"javascript:void(0);\"&gt;'+ options.firstText +'&lt;/a&gt;&lt;/span&gt;';
                  html += ' &lt;span id="'+ options.prevId +'"&gt;&lt;a href=\"javascript:void(0);\"&gt;'+ options.prevText +'&lt;/a&gt;&lt;/span&gt;';
                  html += ' &lt;span id="'+ options.nextId +'"&gt;&lt;a href=\"javascript:void(0);\"&gt;'+ options.nextText +'&lt;/a&gt;&lt;/span&gt;';
                  if(options.lastShow) html += ' &lt;span id="'+ options.lastId +'"&gt;&lt;a href=\"javascript:void(0);\"&gt;'+ options.lastText +'&lt;/a&gt;&lt;/span&gt;';              
              };
  
              html += options.controlsAfter;                      
              $(obj).after(html);                                     
          };
  
          if(options.numeric){                                    
              for(var i=0;i&lt;s;i++){                       
                  $(document.createElement("li"))
                      .attr('id',options.numericId + (i+1))
                      .html('&lt;a rel='+ i +' href=\"javascript:void(0);\"&gt;'+ (i+1) +'&lt;/a&gt;')
                      .appendTo($("#"+ options.numericId))
                      .click(function(){                          
                          animate($("a",$(this)).attr('rel'),true);
                      });                                                 
              };                          
          } else {
              $("a","#"+options.nextId).click(function(){     
                  animate("next",true);
              });
              $("a","#"+options.prevId).click(function(){     
                  animate("prev",true);               
              }); 
              $("a","#"+options.firstId).click(function(){        
                  animate("first",true);
              });             
              $("a","#"+options.lastId).click(function(){     
                  animate("last",true);               
              });             
          };
  
          function setCurrent(i){
              i = parseInt(i)+1;
              $("li", "#" + options.numericId).removeClass("current");
              $("li#" + options.numericId + i).addClass("current");
          };
  
          function adjust(){
              if(t&gt;ts) t=0;       
              if(t&lt;0) t=ts;   
              if(!options.vertical) {
                  $("ul",obj).css("margin-left",(t*w*-1));
              } else {
                  $("ul",obj).css("margin-left",(t*h*-1));
              }
              clickable = true;
              if(options.numeric) setCurrent(t);
          };
  
          function animate(dir,clicked){
              if (clickable){
                  clickable = false;
                  var ot = t;             
                  switch(dir){
                      case "next":
                          t = (ot&gt;=ts) ? (options.continuous ? t+1 : ts) : t+1;                       
                          break; 
                      case "prev":
                          t = (t&lt;=0) ? (options.continuous ? t-1 : 0) : t-1;
                          break; 
                      case "first":
                          t = 0;
                          break; 
                      case "last":
                          t = ts;
                          break; 
                      default:
                          t = dir;
                          break; 
                  };  
                  var diff = Math.abs(ot-t);
                  var speed = diff*options.speed;                     
                  if(!options.vertical) {
                      p = (t*w*-1);
                      $("ul",obj).animate(
                          { marginLeft: p }, 
                          { queue:false, duration:speed, complete:adjust }
                      );              
                  } else {
                      p = (t*h*-1);
                      $("ul",obj).animate(
                          { marginTop: p }, 
                          { queue:false, duration:speed, complete:adjust }
                      );                  
                  };
  
                  if(!options.continuous &amp;&amp; options.controlsFade){                    
                      if(t==ts){
                          $("a","#"+options.nextId).hide();
                          $("a","#"+options.lastId).hide();
                      } else {
                          $("a","#"+options.nextId).show();
                          $("a","#"+options.lastId).show();                   
                      };
                      if(t==0){
                          $("a","#"+options.prevId).hide();
                          $("a","#"+options.firstId).hide();
                      } else {
                          $("a","#"+options.prevId).show();
                          $("a","#"+options.firstId).show();
                      };                  
                  };              
  
                  if(clicked) clearTimeout(timeout);
                  if(options.auto &amp;&amp; dir=="next" &amp;&amp; !clicked){;
                      timeout = setTimeout(function(){
                          animate("next",false);
                      },diff*options.speed+options.pause);
                  };
  
              };
  
          };
          // init
          var timeout;
          if(options.auto){;
              timeout = setTimeout(function(){
                  animate("next",false);
              },options.pause);
          };      
  
          if(options.numeric) setCurrent(0);
  
          if(!options.continuous &amp;&amp; options.controlsFade){                    
              $("a","#"+options.prevId).hide();
              $("a","#"+options.firstId).hide();              
          };              
  
      });
  
  };
  
  })(jQuery);
  </code></pre>
  
  <p>Demo of what I'm working with: <a href="http://cssglobe.com/lab/easyslider1.7/01.html" rel="nofollow">http://cssglobe.com/lab/easyslider1.7/01.html</a></p>