Slick slider replace dots with numbers
<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>