title: JQuery For simple horizontal slider
body: <p><strong>Hi There,</strong></p>
  
  <p>I try to create very simple slider  using  <strong>Jquery scrollLeft() method</strong> .
   I found some answers and i tried this one <strong><a href="https://stackoverflow.com/a/8906007/4015523">here</a></strong>  .... <strong>but not working</strong> .... I'm still beginner in jquery and don't know why .</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>   &lt;div class="gallery-slider "&gt;
         &lt;div class="images-preview"&gt;
             &lt;img alt="" class="img-responsive" src="http://placehold.it/300"&gt;
             &lt;img alt="" class="img-responsive" src="http://placehold.it/300"&gt;
             &lt;img alt="" class="img-responsive" src="http://placehold.it/300"&gt;
             &lt;img alt="" class="img-responsive" src="http://placehold.it/300"&gt;
             &lt;img alt="" class="img-responsive" src="http://placehold.it/300"&gt;
             &lt;img alt="" class="img-responsive" src="http://placehold.it/300"&gt;
             &lt;img alt="" class="img-responsive" src="http://placehold.it/300"&gt;
             &lt;img alt="" class="img-responsive" src="http://placehold.it/300"&gt;
             &lt;img alt="" class="img-responsive" src="http://placehold.it/300"&gt;
             &lt;img alt="" class="img-responsive" src="http://placehold.it/300"&gt;
             &lt;img alt="" class="img-responsive" src="http://placehold.it/300"&gt;
             &lt;img alt="" class="img-responsive" src="http://placehold.it/300"&gt;
         &lt;/div&gt;
         &lt;div class="controls"&gt;
             &lt;div class="right-arrow"&gt;&lt;i class="fa fa-angle-left fa-3x"&gt;&lt;/i&gt;&lt;/div&gt;
             &lt;div class="left-arrow"&gt;&lt;i class="fa fa-angle-right fa-3x"&gt;&lt;/i&gt;&lt;/div&gt;
         &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>    .gallery-slider {
      position: relative;
  }
  
  .gallery-slider .images-preview {
      margin: auto;
      height: 230px;
      overflow: hidden;
  }
  
  .gallery-slider .images-preview img {
      display: inline-block;
      overflow: visible;
      width: 410px;
      margin: 10px 17px;
  }
  .gallery-slider .images-preview img, .controls {
          height: 200px;
      width: 26%;
  }
  /* Controls */
  .controls {
      position: absolute;
      top: 10px;
      width: 100%;
  }
  
  
  .right-arrow, .left-arrow {
      display: inline-block;
  
      padding: 62px;
      background-color: rgba(255, 255, 255, 0.76);
      position: absolute;
      height: 100%;
      cursor: pointer;
  }
  .right-arrow i, .left-arrow i{
          margin: 23px 20px;
  }
  .left-arrow {
      right: 0px;
  }
  
  .right-arrow {
      left: 0px;
      text-align: right;
  }
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>  $(".left-arrow").click(function () { 
        var leftPos = $('.images-preview img').scrollLeft();
        $(".images-preview img").animate({scrollLeft: leftPos - 100}, 1000);
      });
  
      $(".right-arrow").click(function () { 
        var leftPos = $('.images-preview img').scrollLeft();
        $(".images-preview img").animate({scrollLeft: leftPos + 100}, 1000);
      });
  </code></pre>
  
  <p>So <strong>Any help ?!</strong></p>
  
  <p><strong>Thanks in advance</strong></p>
  
  <p><strong><a href="https://jsfiddle.net/Norhan/x22ybggd/" rel="nofollow noreferrer">Fiddle here</a></strong></p>
  
  <p><strong>Update:</strong>
      also i need it to return to <strong><code>scrollleft():0</code></strong> at the end of scrolling </p>