title: How to prevent my jQuery slider to get “overClicks” using .stop() {or anything else you will suggest to use)
body: <p>I have a jQuery slider on my WP website. </p>
  
  <p>When clicking repetitively (without waiting between the clicks) on the arrows to move slides it continues to slide more slides + I have an "addClass" and "removeClass" that makes the image in the centre grow bigger and smaller </p>
  
  <p><img src="https://i.stack.imgur.com/rYyNT.png" alt="how it looks:"></p>
  
  <p><img src="https://i.stack.imgur.com/i0yrP.png" alt="The problem when clicking too fast"></p>
  
  <p>How do I create a pause in clicks when clicking reverentially?</p>
  
  <p>This is my code part: </p>
  
  <pre><code>/**************** Slider STUFF ****************/
  
  //relevant slide parameters: 
  var singleSlide         = '14.5em'; 
  var slideAnimationSpeed = 500;
  var currentSlide        =  5;
  
  //cache DOM
  var $slider         = $('.slider'); 
  var $slideContainer = $slider.find('.slides'); 
  var $slides         = $slideContainer.find('.slide');
  var totalSlides     = $slides.length;
  
  console.log('Total Slides: '+ totalSlides);
  
  // Adds an Id to all li-images 
  $slides.attr('id', function(i) {
     return 'slide_'+(i+1);
  });
  
  //Add a shadowe for the next Client 
  function addTheShadowRight(currentSlide){
      nextSlide = currentSlide + 1 ;
      $('#slide_'+currentSlide).removeClass("sliderPoiner");
      $('#slide_'+nextSlide).addClass("sliderPoiner");
  }
  
  //Add a shadowe for the previous Client 
  function addTheShadowleft(currentSlide){
      prevSlide = currentSlide - 1 ;
      $('#slide_'+currentSlide).removeClass("sliderPoiner");
      $('#slide_'+prevSlide).addClass("sliderPoiner");
  }
  
  //When clicking on the right: 
  $('.scroll-right').click(function(){
      //margin-left the slide including -= :
      $slideContainer.stop().animate({'margin-left': '-='+singleSlide}, slideAnimationSpeed, function(){
          currentSlide++;
          console.log('Current Slide: '+ currentSlide);
          if ((currentSlide+1) === totalSlides) {
              $('#slide_'+currentSlide).removeClass("sliderPoiner");              
              currentSlide = 5;
              $('#slide_'+currentSlide).addClass("sliderPoiner");
              $slideContainer.css('margin-left', '-42em');
          }
      });
      addTheShadowRight(currentSlide);
  })
  
  //When clicking on the left: 
  $('.scroll-left').click(function(){
      //margin-left the slide including -= :
      $slideContainer.stop().animate({'margin-left': '+='+singleSlide}, slideAnimationSpeed, function(){
          currentSlide--;
          console.log('Current Slide: '+ currentSlide);
          if ((currentSlide) === 3) {
              $('#slide_'+currentSlide).removeClass("sliderPoiner");                              
              currentSlide = 24;
              $('#slide_'+currentSlide).addClass("sliderPoiner");
              $slideContainer.css('margin-left', '-317.5em');  
          }
      });
      addTheShadowleft(currentSlide);
  })
  
  
  
  
  // ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~ * ~
  </code></pre>
  
  <p>I used the .stop() function before the .animate - but it seems like nothing is happening. </p>
  
  <p>note: When clicking on the arrows and waiting between every click, it slides fine. The problem is only when clicking fast. </p>