title: Add pagination to the filtering with slider, and show filtered content onload
body: <p>I'm trying to change the code to following requirements. </p>
  
  <ol>
  <li>Change the "prev" and "next" button to pagination (e.g. 1 2 3 4 and so on)</li>
  <li><p>Show the "Category 1" content instead of show all contents. To display the filtered content onload as shown below. I did this but not sure is it good enough or not. </p>
  
  <p><a href="https://i.stack.imgur.com/5ctC7.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5ctC7.jpg" alt="enter image description here"></a></p></li>
  </ol>
  
  <p>Actually I'm still not familiar with jQuery and javaScript. I have been trying to figure out the following code the past few weeks, but failed. Hoping that some of you could provide me with some advice. Thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Show filtred image onload
  $(document).ready(function(){
     $('div.filter a:first-child').trigger('click');
  });
  
  var visible = "";
  
  $('div.filter').delegate('a', 'click', function (event) {
    visible = '.' + this.href.slice(this.href.indexOf("#") + 1);
      pagination();
    event.preventDefault();
  });
  
  
  var itemsNumber = 8;
  var min = 0;
  var max = itemsNumber;
  
  function pagination(action) {
  
      var totalItems = $("li" + visible).length;
      
      if (max &lt; totalItems) {//Stop action if max reaches more than total items 
          if (action == "next") {
  
              min = min + itemsNumber;
              max = max + itemsNumber;
  
          }
      }
  
      if (min &gt; 0) {//Stop action if min reaches less than 0
          if (action == "prev") {
  
              min = min - itemsNumber;
              max = max - itemsNumber;
  
          }
      }
  
      $("li").hide();
      $("li" + visible).slice(min, max).show();
  
  }
  
  pagination();
  
  
  //Next
  $("#next").click(function() {
  
      action = "next";
      pagination(action);
  
  })
  
  //Previous
  $("#prev").click(function() {
      action = "prev";
      pagination(action);
  
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#item-wrapper {
   width:250px;   
   margin:30px 0 0 30px;
  }
  .items li {
   font-family:arial;
  font-size:13px;
   background-color:#ccc;
  margin-bottom:1px; 
  padding:5px;    
  }
  .ctrl-nav {
      background-color:#999;
      padding:5px;
      overflow:hidden;
  }
  .ctrl-nav a {
      font-family:arial;
  font-size:13px;
      padding:5px 10px;
      color:#fff;
  }
  .ctrl-nav a#prev{
   float:left;   
  }
  .ctrl-nav a#next{
   float:right;   
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="filter"&gt;
      &lt;a href="#category-1"&gt;category 1&lt;/a&gt;
      &lt;a href="#category-2"&gt;category 2&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div id="item-wrapper"&gt;
  &lt;ul class="items"&gt;
      &lt;li class="category-1"&gt;item 1&lt;/li&gt;
      &lt;li class="category-1"&gt;item 2&lt;/li&gt;
      &lt;li class="category-1"&gt;item 3&lt;/li&gt;
      &lt;li class="category-1"&gt;item 4&lt;/li&gt;
      &lt;li class="category-1"&gt;item 5&lt;/li&gt;
      &lt;li class="category-1"&gt;item 6&lt;/li&gt;
      &lt;li class="category-2"&gt;item 7&lt;/li&gt;
      &lt;li class="category-2"&gt;item 8&lt;/li&gt;
      &lt;li class="category-2"&gt;item 9&lt;/li&gt;
      &lt;li class="category-2"&gt;item 10&lt;/li&gt;
      &lt;li class="category-2"&gt;item 11&lt;/li&gt;
      &lt;li class="category-2"&gt;item 12&lt;/li&gt;
      &lt;li class="category-1"&gt;item 13&lt;/li&gt;
      &lt;li class="category-1"&gt;item 14&lt;/li&gt;
      &lt;li class="category-2"&gt;item 15&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="ctrl-nav"&gt;
  &lt;a href="#" id="prev"&gt;Previous&lt;/a&gt;&lt;a href="#" id="next"&gt;Next&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>