title: Slick slider replace dots with numbers
body: <p>I'm trying to replace Slick slider / carousel pagination with numbers instead of dots. I have the project setup in js fiddle and I have have a custom function that displays the current slide count of a total of 6. I currently just have '1' replacing the dots but I would like to have the numbers represent the total number of slides.</p>
  
  <p><a href="https://jsfiddle.net/rLLvvpcm/1/" rel="noreferrer">JS Fiddle Demo</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;section class="slider"&gt;
   &lt;div&gt;slide1&lt;/div&gt;
   &lt;div&gt;slide2&lt;/div&gt;
   &lt;div&gt;slide3&lt;/div&gt;
   &lt;div&gt;slide4&lt;/div&gt;
   &lt;div&gt;slide5&lt;/div&gt;
   &lt;div&gt;slide6&lt;/div&gt;
  &lt;/section&gt;
  
  &lt;span class="pagingInfo"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$(".slider").slick({
  autoplay: true,
  dots: true,
  customPaging : function(slider, i) {
  var thumb = $(slider.$slides[i]).data();
  return '&lt;a&gt;1&lt;/a&gt;';
  },
  responsive: [{ 
      breakpoint: 500,
      settings: {
          dots: false,
          arrows: false,
          infinite: false,
          slidesToShow: 2,
          slidesToScroll: 2
      } 
  }]
  });
  </code></pre>