Slick.js:获取当前和总幻灯片(即3/5)

Question

使用Slick.js - 如何获得当前和总幻灯片(即3/5)作为点的简单替代？

我被告知我可以使用customPaging回调参数对象来使用回调,但这究竟是什么意思呢？

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

该slider对象包含一个包含幻灯片计数的变量.

光滑<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

Slick 1.5+更新(测试到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

更新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

Answer 2

您需要在初始化之前绑定 init。

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