Slick carousel + custom ARIA pagination dots

Replacing the default dots <button> that comes by default with the jquery SLICK.

by MartinDubeNet

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.4.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.4.0/slick.min.css">
<div class="slideshow">
    <img src="http://lorempixel.com/500/248" />
    <img src="http://lorempixel.com/500/249" />
    <img src="http://lorempixel.com/500/250" />
    <img src="http://lorempixel.com/500/251" />
</div>
<nav class="slide-controls">
  <a role="button" class="slide-arrow arrow-prev" title="Previous slide"><span>Previous</span></a>
  <a role="button" class="slide-arrow arrow-next" title="Next slide"><span>Next</span></a>
</nav>

CSS

.slide-controls {
  position: relative;
}
.custom-dots {
  padding-left: 0;
}
.custom-dots li {
  margin: 0 0 0 .5em;
  display: inline-block;
  list-style: none;
}
.custom-dots li:first-child {
  margin-left: 0;
}
.custom-dots .dot {
  display: block;
  width: 12px;
  height: 12px;
  background-color: LightGray;
  border: 3px solid DimGray;
  border-radius: 50%;
  cursor: pointer;
}
.custom-dots .slick-active .dot {
  background-color: Lime;
}
.custom-dots .dot:hover,
.custom-dots .slick-active .dot:hover {
  background-color: Blue;
}
.dot .string {
  position: absolute;
  left: -99999px;
  line-height: 0;
  opacity: 0;
}
/* custom arrow controls */
.slide-arrow {
  display: inline-block;
  width: auto;
  height: auto;
  min-height: 10px;
  padding: 5px;
  text-align: center;
  color: DimGray;
  background-color: LightGray;
  border: 3px solid DimGray;
  border-radius: 10px;
  cursor: pointer;
}
.slide-arrow:hover {
  color: Blue;
  background-color: Lime;
}
.slide-arrow.arrow-prev:before {
  content: '←';
}
.slide-arrow.arrow-next:after {
  content: '→';
}
.slide-arrow span {
  position: absolute;
  left: -99999px;
  line-height: 0;
  opacity: 0;
}

JavaScript

$('.slideshow').slick({
    slide: 'img',
    autoplay: true,
    appendArrows: $('.slide-controls'),
    prevArrow: $('.slide-arrow.arrow-prev'),
    nextArrow: $('.slide-arrow.arrow-next'),
    appendDots: $('.slide-controls'),
    dots: true,
    dotsClass: 'custom-dots', //slick generates this <ul.custom-dots> within the appendDots container
    customPaging: function (slider, i) {
        //FYI just have a look at the object to find aviable information
        //press f12 to access the console
        //you could also debug or look in the source
        console.log(slider);
        var slideNumber = (i + 1),
            totalSlides = slider.slideCount;
        return '<a class="dot" role="button" title="' + slideNumber + ' of ' + totalSlides + '"><span class="string">' + slideNumber + '/' + totalSlides + '</span></a>';
    }
});