Slick Slider With Custom Paging

A Base fiddle for use in the issue section of github https://github.com/kenwheeler/slick/issues

by vi161

HTML

<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css">
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css">
<section class="slider">
    <div class="slide-title" title="123" data-thumb="http://cdn.bulbagarden.net/upload/e/ec/001MS.png"><img src="http://cdn.bulbagarden.net/upload/c/c0/Spr_3f_001.png"><a>dot1</a></div>
    <div data-thumb="http://cdn.bulbagarden.net/upload/b/bb/004MS.png"><img src="http://cdn.bulbagarden.net/upload/e/e9/Spr_3f_004.png"><a>dot2</a></div>
    <div data-thumb="http://cdn.bulbagarden.net/upload/9/92/007MS.png"><img src="http://cdn.bulbagarden.net/upload/f/f8/Spr_3f_007.png"><a>dot3</a></div>
    <div data-thumb="http://cdn.bulbagarden.net/upload/0/0f/025MS.png"><img src="http://cdn.bulbagarden.net/upload/5/5b/Spr_3f_025.png"><a>dot4</a></div>
    <div data-thumb="http://cdn.bulbagarden.net/upload/d/de/133MS.png"><img src="http://cdn.bulbagarden.net/upload/a/a9/Spr_3f_133.png"><a>dot5</a></div>
    <div data-thumb="http://cdn.bulbagarden.net/upload/a/a7/151MS.png"><img src="http://cdn.bulbagarden.net/upload/3/33/Spr_3f_151.png"><a>dot6</a></div>
</section>

SCSS

$c1: #cee5ea;
$c2: #efdfda;

.slider {
    width: auto;
    margin: 30px 50px 50px;
}

.slick-slide {
    background: $c1;
    color: white;
    padding: 20px 0;
    font-size: 30px;
    font-family: "Arial", "Helvetica";
    text-align: center;
    
    img { display: inline-block; }
}

.slick-prev:before, 
.slick-next:before {
    color: black;    
}

.slick-dots {
    bottom: -40px;
}

.slick-slide:nth-child(odd) {
     background: $c2;
}

JavaScript

$(".slider").slick({

    autoplay: true,
    dots: true,
 				customPaging : function(slider, i) {
        var thumb = $(slider.$slides[i]).find('a').text();
        console.log('attr:' + thumb + '');
        return '<a>' + thumb + '</a>';
    }, 
/*       customPaging: function(slider, i) { 
          // this example would render "tabs" with titles
          return '<button class="tab">' + $(slider.$slides[i]).find('.slide-title').text() + '</button>';
        },
       */
    responsive: [{ 
        breakpoint: 500,
        settings: {
            dots: true,
            arrows: false,
            infinite: false,
            slidesToShow: 2,
            slidesToScroll: 2
        } 
    }]
});