title: Image slider with multiple images
body: <p>I have multiple images in HTML File. I want to show only 5 images first. Then click on next arrow will display next 5 images and fadeOut the original ones and so on until all the images get exhausted. Similarly for prev arrow will display prev 5 images and so on until we reach to first image.</p>
  
  <pre><code>&lt;ul class="thumbs noscript"&gt;
  
  &lt;li&gt;
      &lt;a class="thumb" id = "26"&gt;
          &lt;img src="images/1.png" alt="Title #0" width="75" height="75"/&gt;
      &lt;/a&gt;
  
  &lt;/li&gt;
  
  &lt;li&gt;
      &lt;a class="thumb" id = "28"&gt;
          &lt;img src="images/2.png" alt="Title #0" width="75" height="75"/&gt;
      &lt;/a&gt;
  
  &lt;/li&gt;
  
  &lt;li&gt;
      &lt;a class="thumb" id = "25"&gt;
          &lt;img src="images/3.png" alt="Title #0" width="75" height="75"/&gt;
      &lt;/a&gt;
  
  &lt;/li&gt;
  
  &lt;li&gt;
      &lt;a class="thumb" id = "3000"&gt;
          &lt;img src="images/4.png" alt="Rice" width="75" height="75"/&gt;
      &lt;/a&gt;
  
  &lt;/li&gt;
  
  &lt;li&gt;
      &lt;a class="thumb" id = "1"&gt;
          &lt;img src="images/5.jpg" alt="Pickles and Sauces" width="75" height="75"/&gt;
      &lt;/a&gt;
  
  &lt;/li&gt;
  
  &lt;li&gt;
      &lt;a class="thumb" id = "53"&gt;
          &lt;img src="images/2.jpg" alt="Tea and Coffee" width="75" height="75"/&gt;
      &lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;a class="thumb" id = "3"&gt;
          &lt;img src="images/6.png" alt="Title #0" width="75" height="75"/&gt;
      &lt;/a&gt;
  
  &lt;/li&gt;
  
  &lt;li&gt;
      &lt;a class="thumb" id = "30"&gt;
          &lt;img src="images/7.png" alt="Title #0" width="75" height="75"/&gt;
      &lt;/a&gt;
  
  &lt;/li&gt;
  
  &lt;li&gt;
      &lt;a class="thumb" id = "20"&gt;
          &lt;img src="images/8.png" alt="Title #0" width="75" height="75"/&gt;
      &lt;/a&gt;
  
  &lt;/li&gt;
  
  &lt;li&gt;
      &lt;a class="thumb" id = "56"&gt;
          &lt;img src="images/9.png" alt="Detergent Powder" width="75" height="75"/&gt;
      &lt;/a&gt;
  
  &lt;/li&gt;
  
  &lt;li&gt;
      &lt;a class="thumb" id = "27"&gt;
          &lt;img src="images/10.png" alt="Title #0" width="75" height="75"/&gt;
      &lt;/a&gt;
  
  &lt;/li&gt;
  &lt;ul&gt;
  </code></pre>
  
  <p>There are multiple resources for one image at a time. but didn't any with multiple images. If will be very helpful if someone can share the thoughts.  </p>