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

User · Answer

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

User · Answer

if you want page numbering   Example  1 2 3 4     HTML    lt div class  slider  gt     lt div gt       lt div gt Some content lt  div gt       lt div class  slider-number  gt  lt span gt 1 2 3 4    lt  span gt  lt  div gt     lt  div gt     lt div gt       lt div gt Some content lt  div gt       lt div class  slider-number  gt  lt span gt 1 2 3 4    lt  span gt  lt  div gt     lt  div gt               lt  div gt    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  lt   slidesLength   i   1   i -  slidesLength - 1           var numberSlide2   i   2  lt   slidesLength   i   2   i -  slidesLength - 2           var numberSlide3   i   3  lt   slidesLength   i   3   i -  slidesLength - 3           var numberSlide4   i   4  lt   slidesLength   i   4   i -  slidesLength - 4            status html   lt strong gt   numberSlide1   lt  strong gt                       numberSlide2                     numberSlide3                     numberSlide4                 JsFiddle DEMO

User · Answer

You need to bind init before initialization       slider-for   on  init   function event  slick             this  append   lt div class  slider-count  gt  lt p gt  lt span id  current  gt 1 lt  span gt  von  lt span id  total  gt   slick slideCount   lt  span gt  lt  p gt  lt  div gt                     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

User · Answer

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   lt div class  slick-counter  gt    parseInt e currentSlide   1  10          e slideCount    lt  div gt            onAfterChange  function e        el find   slick-counter   html e currentSlide   1        e slideCount             http   jsfiddle net cpdqhdwy 6

User · Answer

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

User · Answer

I had an issue with multiple slides  version 1 8 1 if slidesToShow and slidesToScroll more than 1 trick is in slick slickGetOption  slidesToShow       quot  your-selector quot   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

User · Answer

The slider object contains the slide count as property   Slick  lt  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 - gt  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

User · Answer

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           amp  slick-active               display  inline-block                    button               background  none              border  none

User · Answer

Modifications are done to the new Slick version 1 7 1    Here is a updated script example  jsfiddle

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

Examples related to javascript

Examples related to jquery

Examples related to slick.js