Slick.js：获取当前和总幻灯片（即3/5）

问题描述

使用 - 如何获得当前和总幻灯片（即3/5）作为更简单的替代方式点？

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

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

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

推荐答案

slider object包含一个包含幻灯片计数的变量。

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

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

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

这篇关于Slick.js：获取当前和总幻灯片（即3/5）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！