Slick Carousel - with custom pagination

Using the "slide indicator dots" to display custom pagination.

by ian_smithz

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.css">
<div id="carousel" class="slider">
  <div class="slider-item">Slide nb 1</div>
  <div class="slider-item">Slide nb 2</div>
  <div class="slider-item">Slide nb 3</div>
  <div class="slider-item">Slide nb 4</div>
  <div class="slider-item">Slide nb 5</div>
  <div class="slider-item">Slide nb 6</div>
  <div class="slider-item">Slide nb 7</div>
  <div class="slider-item">Slide nb 8</div>
  <div class="slider-item">Slide nb 9</div>
</div>

CSS

.slider-item {
  border: 5px solid #333;
  background: #ccc;
  height: 200px;
  font-size: 72px;
  text-align: center;
  line-height: 200px;
}
/* Slider arrows */
.slick-arrow {
  z-index: 9;
}
.slick-prev {
  left: 0;
}
.slick-next {
  right: 0;
}
/* END: Slider arrows */

JavaScript

$(document).ready(function() {
  var slickOpts = {
    slidesToShow: 1,
    slidesToScroll: 1,
    //centerMode: true,
    easing: 'swing', // see http://api.jquery.com/animate/
    speed: 700,
    dots: true,
    customPaging: function(slick,index) {
        return '<a>' + (index + 1) + '</a>';
    }
  };
  // Init slick carousel
  $('#carousel').slick(slickOpts);
});