title: A little bug in my custom jQuery carousel
body: <p>I'm creating a custom jQuery carousel and its coming out really well :)</p>
  
  <p>But found a little glitch / bug in it. When you click on Prev / Next like a normal user do, it works fine but when you click on it like a robot with hyper speed, it slides blank spaces.</p>
  
  <p>I'm sharing my code here and also providing the <a href="http://jsfiddle.net/omerblink/4e92fb58/" rel="nofollow">JSFiddle Link</a>. It would be nice if someone could help me out or give me better suggestions to make it more pro :)</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="my_carousel"&gt;
      &lt;div class="carousel"&gt;
        &lt;ul&gt;
          &lt;li style="background:red;"&gt;&lt;/li&gt;
          &lt;li style="background:green;"&gt;&lt;/li&gt;
          &lt;li style="background:blue;"&gt;&lt;/li&gt;
          &lt;li style="background:purple;"&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {
  padding: 0;
  margin: 0;
  }
  #my_carousel {
  padding: 0 15px;
  position: relative;
  height: 100px;
  display: inline-block;
  }
  .carousel {
  overflow:hidden;
  position: relative;
  height: 100px;
  }
  .carousel ul {
  list-style: none;
  position: absolute;
  left: 0;
  top: 0;
  }
  .carousel ul li {
  width: 100px;
  height: 100px;
  float: left;
  }
  .controls {
  position: absolute;
  top: 50%;
  left: 0;
  margin: -10px 0 0;
  width: 100%;
  }
  .prev {
  float: left;
  }
  .next {
  float: right;
  }
  </code></pre>
  
  <p>JQUERY:</p>
  
  <pre><code>(function ($) {
  $.fn.my_carousel = function (defaults) {
  
      // Default settings
      var settings = $.extend({
          layout: 'hort',
          visible_items: 2,
          item_width: this.find('li').width(),
          reel_width: this.find('li').length
      }, defaults);
  
      if (settings.layout === 'hort') {
  
          // Adding Prev/Next links 
          this.find('.carousel').after('&lt;div class="controls"&gt;&lt;a href="#" class="prev"&gt;&amp;lt;&lt;/a&gt;&lt;a href="#" class="next"&gt;&amp;gt;&lt;/a&gt;&lt;/div&gt;');
  
          // Setting window / reel /controls width
          this.find('.carousel').width(settings.item_width * settings.visible_items);
          this.find('ul').width(settings.reel_width * settings.item_width);
  
          // Slide control
          $('.controls a').click(function () {
              var pos = $(this).parents(this).find('ul').offset().left;
              if ($(this).hasClass('next')) {
                  if (pos &gt;= ((settings.item_width * settings.visible_items) - (settings.reel_width * settings.item_width) + settings.item_width)) {
                      $(this).parents(this).find('ul').animate({
                          left: '-=' + settings.item_width + 'px'
                      }, 200);
                  } else {
                      return false;
                  }
              } else {
                  if (pos &lt;= 0) {
                      $(this).parents(this).find('ul').animate({
                          left: '+=' + settings.item_width + 'px'
                      }, 200);
                  } else {
                      return false;
                  }
              }
          });
      }
  
  };
  })(jQuery);
  
  $('#my_carousel').my_carousel();
  </code></pre>