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/

Mx. · Accepted Answer · 2021-04-06T10:48:21.050

82

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

edited Apr 06 '21 at 10:48

answered Sep 15 '14 at 11:55

Mx.

3,025
1
21
32

Awesome! But how would one display the right paging for each slide? `1/3` on the first, `2/3` on the second etc.? – Mark Boulder Sep 15 '14 at 13:38
you want to place the paging information on the slides ? – Mx. Sep 15 '14 at 13:41
Yep. If you remove `customPaging` and `dotsClass` altogether you can see how Slick originally does this. But I believe `N/N` would be a tad more minimalistic. http://jsfiddle.net/frank_o/2uhtas91/3/ is wrong obviously but.. – Mark Boulder Sep 15 '14 at 13:43
there's any way to do this in angular version of slick? thank you – João Paulo Fricks Jan 26 '16 at 13:43
1

`ul.slick-dots { li { &.slick-active { display: block; } display: none; } }` with this SCSS I got the correct item to display. Works well enough thanks! – HongPong Nov 16 '17 at 23:02
2

Make sure you define the init event listener BEFORE your init slick code or it won't do anything. – Jones03 Mar 27 '18 at 09:14
1

could do $status.html( '' + i + ' / ' + slick.slideCount + ''); if you wanna style the paginations ! awesome answer – Shamseer Ahammed Sep 12 '19 at 10:17
How would you handle if the there were more slides and wouldn't be infinite? Like here: http://jsfiddle.net/rvz0eytk/ It gives you wrong numbers for slick.slideCount – levipadre Dec 18 '19 at 17:00
1

In that case you cant use `slick.slideCount` info, but the information is avialable via `slick.$dots[0].children.length`. Heres an example http://jsfiddle.net/rLckgsxh/ – Mx. Jan 02 '20 at 12:31
1

Great job for updating this one, the last one works perfectly! – Loosie94 Jul 02 '20 at 14:58

score 5 · Answer 2 · answered Apr 05 '17 at 13:02

You need to bind init before initialization.

$('.slider-for').on('init', function(event, slick){
        $(this).append('<div class="slider-count"><p><span id="current">1</span> von <span id="total">'+slick.slideCount+'</span></p></div>');
    });
    $('.slider-for').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: true,
      fade: true
    });
    $('.slider-for')
        .on('afterChange', function(event, slick, currentSlide, nextSlide){
            // finally let's do this after changing slides
            $('.slider-count #current').html(currentSlide+1);
        });

Joe L. · Answer 3 · 2014-12-10T21:42:49.780

This might help:

You don't need to enable dots or customPaging.
Position .slick-counter with CSS.

CSS

.slick-counter{
  position:absolute;
  top:5px;
  left:5px;
  background:yellow;
  padding:5px;
  opacity:0.8;
  border-radius:5px;
}

JavaScript

var $el = $('.slideshow');

$el.slick({
  slide: 'img',
  autoplay: true,
  onInit: function(e){
    $el.append('<div class="slick-counter">'+ parseInt(e.currentSlide + 1, 10) +' / '+ e.slideCount +'</div>');
  },
  onAfterChange: function(e){
    $el.find('.slick-counter').html(e.currentSlide + 1 +' / '+e.slideCount);
  }
});

http://jsfiddle.net/cpdqhdwy/6/

score 3 · Answer 4 · answered Aug 10 '17 at 16:57

I use this code and it works:

.slider - this is slider block

.count - selector which use for return counter

$(".slider").on("init", function(event, slick){
    $(".count").text(parseInt(slick.currentSlide + 1) + ' / ' + slick.slideCount);
});

$(".slider").on("afterChange", function(event, slick, currentSlide){
    $(".count").text(parseInt(slick.currentSlide + 1) + ' / ' + slick.slideCount);
});
$(".page-article-item_image-slider").slick({
    slidesToShow: 1,
    arrows: true
});

Wanted to know the actual number of slides excluding the cloned ones, slick.slideCount helped me to . Thanks a lot — techloris_109, Jul 06 '18 at 05:51

MartinDubeNet · Answer 5 · 2016-07-14T15:53:38.547

Based on the first proposition posted by @Mx. (posted sept.15th 2014) I created a variant to get a decent HTML markup for ARIA support.

$('.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);
        var slideNumber   = (i + 1),
            totalSlides = slider.slideCount;
        return '<a class="custom-dot" role="button" title="' + slideNumber + ' of ' + totalSlides + '"><span class="string">' + slideNumber + '</span></a>';
    }
});

jsFiddle DEMO

score 2 · Answer 6 · answered Sep 22 '17 at 12:29

Using the previous method with more than 1 slide at time was giving me the wrong total so I've used the "dotsClass", like this (on v1.7.1):

// JS

var slidesPerPage = 6

$(".slick").on("init", function(event, slick){
   maxPages = Math.ceil(slick.slideCount/slidesPerPage);
   $(this).find('.slider-paging-number li').append('/ '+maxPages);
});

$(".slick").slick({
   slidesToShow: slidesPerPage,
   slidesToScroll: slidesPerPage,
   arrows: false,
   autoplay: true,
   dots: true,
   infinite: true,
   dotsClass: 'slider-paging-number'
});

// CSS

ul.slider-paging-number {
    list-style: none;
    li {
        display: none;
        &.slick-active {
            display: inline-block;
        }
        button {
            background: none;
            border: none;
        }
    }
}

This actually worked for me - but it throws up errors in the console saying "Uncaught TypeError: Cannot read property 'add' of null" which means that it's calling slick twice :-( — coops, May 17 '19 at 08:22

score 0 · Answer 7 · answered Aug 15 '17 at 11:23

0

Modifications are done to the new Slick version 1.7.1.

Here is a updated script example: jsfiddle

answered Aug 15 '17 at 11:23

Magni Hansen

62
10

score 0 · Answer 8 · answered Feb 27 '19 at 17:03

if you want page numbering:

Example: 1 2 3 4...

HTML:

<div class="slider">
  <div>
    <div>Some content</div>
    <div class="slider-number"><span>1 2 3 4...</span></div>
  </div>
  <div>
    <div>Some content</div>
    <div class="slider-number"><span>1 2 3 4...</span></div>
  </div>
  ...
  ...
</div>

JS:

$('.slider').on('init reInit afterChange',
    function(event, slick, currentSlide){
        var status = $(this).find('.slider-number span');
        //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
        var i = slick.currentSlide;
        var slidesLength = slick.slideCount;
        var numberSlide1 = i + 1 <= slidesLength ? i + 1 : i - (slidesLength - 1);
        var numberSlide2 = i + 2 <= slidesLength ? i + 2 : i - (slidesLength - 2);
        var numberSlide3 = i + 3 <= slidesLength ? i + 3 : i - (slidesLength - 3);
        var numberSlide4 = i + 4 <= slidesLength ? i + 4 : i - (slidesLength - 4);

        status.html('<strong>'+numberSlide1+'</strong>' + ' ' +
            numberSlide2 + ' ' +
            numberSlide3 + ' ' +
            numberSlide4 + '...');
});

JsFiddle DEMO

score 0 · Answer 9 · answered Aug 27 '20 at 23:46

I had an issue with multiple slides. version 1.8.1

if slidesToShow and slidesToScroll more than 1

trick is in slick.slickGetOption('slidesToShow');

$(".your-selector").on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){
    var i = (currentSlide ? currentSlide : 0) + 1;
    var slidesToShow = slick.slickGetOption('slidesToShow');
    var curPage = parseInt((i-1)/slidesToShow) + 1;
    var lastPage =  parseInt((slick.slideCount-1)/slidesToShow) + 1;
    $('.your-selector').text(curPage);
    $('.your-selector').text(lastPage);
});

Note curPage and lastPage is separate. I had to color them differently.

Based on top-voted answer

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

9 Answers9

Slick < 1.5

Update for Slick 1.5+ (tested until 1.8.1)

Update for Slick 1.9+

Example when using `slidesToShow`

Linked

Related

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

9 Answers9

Slick < 1.5

Update for Slick 1.5+ (tested until 1.8.1)

Update for Slick 1.9+

Example when using slidesToShow

Linked

Related

Example when using `slidesToShow`