title: Sliding images left and right of gallery
body: <p>This is code for the <a href="http://jsfiddle.net/kem656qL/5/" rel="nofollow"><strong>jSFiddle</strong></a>.
  Here i am trying to make sure that the <strong>red</strong> i.e the <code>.selected</code> div is <strong>always in the view of the user</strong> wherever i slide my images next or previous.</p>
  
  <p>I <strong>DONT</strong> want to use <strong>Plugins</strong> for this!</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="base-c"&gt;
      &lt;div class="base"&gt;
          &lt;div class="images" set="5"&gt;5&lt;/div&gt;
          &lt;div class="images selected" set="6"&gt;6&lt;/div&gt;
          &lt;div class="images" set="7"&gt;7&lt;/div&gt;
          &lt;div class="images" set="8"&gt;8&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;button id="prv"&gt;Prev&lt;/button&gt;
  &lt;button id="nxt"&gt;Next&lt;/button&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.base-c {
      width:80%;
      height:150px;
      position:relative;
  }
  .base {
      white-space:nowrap;
      overflow:hidden;
      margin-left:0px;
      width:100%;
  }
  .images {
      height:100px;
      width:100px;
      padding:5px;
      border:2px solid #000;
      display:inline-block;
  }
  .images.selected {
      background:red;
  }
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>var spb = $('.base');
  var limit = 20; //20 images in max
  var from, to;
  $(document).on('click', '#prv', function () {
      var set = parseInt($('.images.selected').attr('set'));
      if (set &gt; 0) {
          $('.images.selected').removeClass('selected');
  
          var ci = $('.images[set="' + (set - 1) + '"]');
  
          if (ci.length == 0) {
              to = set - 1;
              from = to - 3;
              if (from &lt; 0) {
                  from = limit;
              }
              var str = "";
              for (var i = from; i &lt;= to; i++) {
                  str += '&lt;div class="images" set="' + i + '"&gt;' + i + '&lt;/div&gt;';
              }
  
              spb.prepend(str);
              ci = $('.images[set="' + (set - 1) + '"]');
          }
          ci.addClass('selected');
          spbgoLilright(100);
      }
  });
  $(document).on('click', '#nxt', function () {
      var set = parseInt($('.images.selected').attr('set'));
      if (set &lt; limit) {
          $('.images.selected').removeClass('selected');
          var ci = $('.images[set="' + (set + 1) + '"]');
  
          if (ci.length == 0) {
              from = set + 1;
              to = from + 3;
              if (to &gt; limit) {
                  to = limit;
              }
              for (var i = from; i &lt; to; i++) {
                  spb.append('&lt;div class="images" set="' + i + '"&gt;' + i + '&lt;/div&gt;');
              }
              ci = $('.images[set="' + (set + 1) + '"]');
          }
          ci.addClass('selected');
  
          spbgoLilleft(100);
      }
  });
  
  function spbgoLilleft(step) {
      var mL = parseInt(spb.css('marginLeft'));
      mL = mL - step;
      spb.css('marginLeft', mL);
  }
  
  function spbgoLilright(step) {
      var mL = parseInt(spb.css('marginLeft'));
      mL = mL + step;
      if (mL &lt; 0) {
          mL = 0;
      }
      spb.css('marginLeft', mL);
  }
  </code></pre>