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

问题:

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/

回答1:

The slider object contains a variable that is containing the slide count.

$('.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

回答2:

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('
'+ parseInt(e.currentSlide + 1, 10) +' / '+ e.slideCount +'
');   },   onAfterChange: function(e){     $el.find('.slick-counter').html(e.currentSlide + 1 +' / '+e.slideCount);   } }); 

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

回答3:

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 }); 

回答4:

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 '' + slideNumber + '';     } }); 

jsFiddle DEMO

回答5:

You need to bind init before initialization.

$('.slider-for').on('init', function(event, slick){         $(this).append('
1 von '+slick.slideCount+'
');     });     $('.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);         }); 

回答6:

Modifications are done to the new Slick version 1.7.1. 

Here is a updated script example: jsfiddle

回答7:

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;         }     } } 

文章来源: Slick.js: Get current and total slides (ie. 3/5)