title: Jquery slider - stop sliding right
body: <p>I have made a carousel slider with jquery, where I have some products. I want the slider to stop sliding when I reach the last product, what I was able to do so far is to stop the sliding when the last product is not visible, but thats not what I need. It should stop when the last product is visible, How can I achieve that?</p>
  
  <p><a href="https://jsfiddle.net/3zcn19ms/1/" rel="nofollow"><strong>JSFIDDLE</strong></a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="controls"&gt;
      &lt;div class="control-left"&gt;left&lt;/div&gt;
      &lt;div class="control-right"&gt;right&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;div class="sliderHolder"&gt;
          &lt;div class="productsWrapper"&gt;
              &lt;article&gt;
                  &lt;img src="http://www.sha.org/bottle/missionbottle.jpg"&gt;
              &lt;/article&gt;
              &lt;article&gt;
                  &lt;img src="http://www.sha.org/bottle/missionbottle.jpg"&gt;
              &lt;/article&gt;
              &lt;article&gt;
                  &lt;img src="http://www.sha.org/bottle/missionbottle.jpg"&gt;
              &lt;/article&gt;
              &lt;article&gt;
                  &lt;img src="http://www.sha.org/bottle/missionbottle.jpg"&gt;
              &lt;/article&gt;
              &lt;article&gt;
                  &lt;img src="http://www.sha.org/bottle/missionbottle.jpg"&gt;
              &lt;/article&gt;
              &lt;article&gt;
                  &lt;img src="http://www.sha.org/bottle/missionbottle.jpg"&gt;
              &lt;/article&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JQUERY</p>
  
  <pre><code>var container = $(".sliderHolder");
  var containerProducts = $(".productsWrapper").width();
  
  var animating = false;
  
  $(document).on("click", ".control-right", function () {
      if (parseInt(container.css("right"), 10) &lt;= containerProducts) {
          animating = true;
          container.stop().animate({
              'right': "+=401px"
          }, 600, function () {
              animating = false;
          });
      }
  });
  
  
  $(document).on("click", ".control-left", function () {debugger;
      if (parseInt(container.css("right"), 10) &gt; 0) {
  
          animating = true;
          container.stop().animate({
              'right': "-=401px"
          }, 600, function () {
              animating = false;
          });
  
      }
  
  });
  
  $(".control-left, .control-right").click(function () {
      if (animating) {
          return false;
      }
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.controls {
      top: 50px;
      width: 100%;
      height: 100px;
      position:relative;
  }
  .control-left {
      left:0;
  }
  .control-right {
      right:0;
  }
  .control-left, .control-right {
      width: 50px;
      height: 50px;
      background-color: #000;
      position: absolute;
      color: #fff;
  }
  .container {
      max-width: 100%;
      overflow: hidden;
      position: relative;
  }
  .productsWrapper {
      display: inline-block;
  
  }
  .sliderHolder {
      position:relative;
      width: 28000px;
      right: 0px;
  }
  img {
      width: 200px;
  }
  article {
      width: 200px !important;
      float: left;
  }
  </code></pre>