javascript - Slick.js: Get current and total slides (ie. 3/5)

Question

Using Slick.js - how does one get current and total slides (ie. 3/5) as a simpler alternative to the dots?

I've been told I can use the customPaging callback using the callback argument objects, but what does that mean exactly?

$('.slideshow').slick({
    slide: 'img',
    autoplay: true,
    dots: true,
    customPaging: function (slider, i) {
        return slider.slickCurrentSlide + '/' + (i + 1);
    }
});

http://jsfiddle.net/frank_o/cpdqhdwy/1/

Answer 1

The slider object contains the slide count as property.

Slick < 1.5

$('.slideshow').slick({
    slide: 'img',
    autoplay: true,
    dots: true,
    dotsClass: 'custom_paging',
    customPaging: function (slider, i) {
        //FYI just have a look at the object to find available information
        //press f12 to access the console in most browsers
        //you could also debug or look in the source
        console.log(slider);
        return  (i + 1) + '/' + slider.slideCount;
    }
});

DEMO

Update for Slick 1.5+ (tested until 1.8.1)

var $status = $('.pagingInfo');
var $slickElement = $('.slideshow');

$slickElement.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){
    //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
    var i = (currentSlide ? currentSlide : 0) + 1;
    $status.text(i + '/' + slick.slideCount);
});

$slickElement.slick({
    slide: 'img',
    autoplay: true,
    dots: true
});

DEMO

Update for Slick 1.9+

var $status = $('.pagingInfo');
var $slickElement = $('.slideshow');

$slickElement.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){
    //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
    var i = (currentSlide ? currentSlide : 0) + 1;
    $status.text(i + '/' + slick.slideCount);
});

$slickElement.slick({
    autoplay: true,
    dots: true
});

DEMO

Example when using slidesToShow

var $status = $('.pagingInfo');
var $slickElement = $('.slideshow');

$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
  // no dots -> no slides
  if(!slick.$dots){
    return;
  }
  
  //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
  var i = (currentSlide ? currentSlide : 0) + 1;
  // use dots to get some count information
  $status.text(i + '/' + (slick.$dots[0].children.length));
});

$slickElement.slick({
  infinite: false,
  slidesToShow: 4,
  autoplay: true,
  dots: true
});

DEMO