title: jQuery: scroll left / right to next div
body: <p>I have a parent <code>.slider-wrap</code> div at <code>100%</code> width, with 3 <code>.slider-slide-wrap</code> child divs inside, each at <code>680px</code> width. You can scroll horizontally inside the <code>.slider-wrap</code> div.</p>
  
  <p>I've also created 2 <code>.slider-nav</code> divs, <code>#slider-left</code> sitting on the left, and <code>#slider-right</code> sitting on the right, the idea being, you can scroll as you wish using the scrollbar, but if you clicked the <code>#slider-right</code> div at any time, it would slide you across to the next instance of <code>.slider-slide-wrap</code> divs. Thus, the 2 <code>.slider-nav</code> divs will take you left and right to the next / previous instance of <code>.slider-slide-wrap</code> div.</p>
  
  <p>jsFiddle demo: <a href="http://jsfiddle.net/neal_fletcher/rAb3V/" rel="nofollow">http://jsfiddle.net/neal_fletcher/rAb3V/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="slider-wrap"&gt;
      &lt;div class="slide-wrap"&gt;
          &lt;div class="slider-slide-wrap"&gt;&lt;/div&gt;
          &lt;div class="slider-slide-wrap"&gt;&lt;/div&gt;
          &lt;div class="slider-slide-wrap"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="slider-left" class="slider-nav"&gt;&lt;/div&gt;
  &lt;div id="slider-right" class="slider-nav"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(document).ready(function () {
  
      var n = $(".slider-slide-wrap").length,
          width = 680,
          newwidth = width * n;
  
      $('.slide-wrap').css({
          'width': newwidth
      });
  
  });
  
  
  $(document).ready(function () {
      $(".slider-slide-wrap").each(function (i) {
          var thiswid = 680;
          $(this).css({
              'left': thiswid * i
          });
      });
  });
  </code></pre>
  
  <p>If this is at all possible? Any suggestions would be greatly appreciated!</p>