title: carousel slider create custom how to stop when user mouser over to carousel slider
body: <p>I have create a small carousel for javascript code is here</p>
  
  <pre><code>$.fn.calcslider = function(options){
      var settings = $.extend({
          // These are the defaults.
          autoslide: false,
          autoslideInterval : 1000,
          slideInterval : 1000
      }, options );
      return this.each(function(){
          var autoslide = '', scope = $(this),
          liLength = scope.find('.calc-list li').length,
          liWidth = scope.find('.calc-list li').outerWidth(true),
          totalWidth = liLength * liWidth,
          flag = true;
          scope.find('.calc-list ul').width(totalWidth);
  
          if(liLength == 1){
             scope.find('.prev-slide').addClass('hide');
             scope.find('.next-slide').addClass('hide');
          }
  
          var setAutoSider = function(check){
              if(settings.autoslide){
                  if(check == 'clear'){
                      clearInterval(autoslide);
                  }else{
                      autoslide = setInterval(function(){
                          scope.find('.next-slide').trigger('click');
                      }, settings.autoslideInterval);
                  }   
              }               
          }
  
          setAutoSider('set');
  
          scope.find('.prev-slide').stop(true, true).click(function(){
              if(flag == true){
                  flag = false;
                  setAutoSider('clear');
                  var lastLi = scope.find('.calc-list ul li:last-child').detach();
                  scope.find('.calc-list ul').prepend(lastLi);
                  scope.find('.calc-list ul').css('marginLeft' , '-'+ liWidth +'px');
                  scope.find('.calc-list ul').animate({
                      marginLeft : '0'
                  },settings.slideInterval, function(){
                      flag = true;
                      setAutoSider('set');
                  });
              }
              return false;
          });
          scope.find('.next-slide').stop(true, true).click(function(){
              if(flag == true){
                  flag = false;
                  setAutoSider('clear');
                  scope.find('.calc-list ul').animate({
                      marginLeft : '-'+ liWidth +'px'
                  },settings.slideInterval, function(){
                      var firstLi = scope.find('.calc-list ul li:first-child').detach();
                      scope.find('.calc-list ul').append(firstLi);
                      scope.find('.calc-list ul').css('marginLeft' , 0);
                      flag = true;
                      setAutoSider('set');
                  });
              }
              return false;
          });
      });
  }
  </code></pre>
  
  <p>and i used to this </p>
  
  <pre><code>$('.mywrap').calcslider({
      autoslide : true,
      autoslideInterval : 5000,
      slideInterval : 500
  });
  </code></pre>
  
  <p>it's working fine now now i m expend to one functinality to this 
  If user mouse hover to this then it's stop working and mouse out than it's working now .</p>