title: horrizontal scrolling using arrows with a gap
body: <p>I'm using an horizontal div to display images inside li.</p>
  
  <p>I would like to add an horizontal navigation using arrows (left &amp; right).
  when clicking on the left arrow, my div scrolls of 156px, and when clicking on the right arrow 156px to.
  I tried to do this with this JS. but it's not a real scroll, and at the end of my div it keeps scrolling.</p>
  
  <p>here is my JS :</p>
  
  <pre><code>$('#next_nav').click(function () {
         $( "#nav" ).css('left','-=156px');
      });
      $('#prev_nav').click(function () {
         $( "#nav" ).css('left','+=156px');
      });
  </code></pre>
  
  <p>here is a JSfiddle with my actual code <a href="http://jsfiddle.net/PAw8q/5/" rel="nofollow">http://jsfiddle.net/PAw8q/5/</a></p>
  
  <p>what I'm trying to do is pretty much like this one, but I can't find how to make it work...
  <a href="http://jsfiddle.net/r6HwL/7/" rel="nofollow">http://jsfiddle.net/r6HwL/7/</a></p>
  
  <p>I hope someone woulb be abble to help me with this,</p>
  
  <p>thanks for your help !</p>