时间戳

首页 > 解决方案 > 在 slick.js 中添加幻灯片计数

javascript - 在 slick.js 中添加幻灯片计数

问题描述

我正在使用 Slick.js 在我的页面上显示幻灯片。它按预期工作但是我试图在滑块底部添加一个滑块计数器，如果显示第一张幻灯片将显示 1/4，如果显示第二张幻灯片则显示 2/4，等等。我尝试使用dotsClass: 'custom_paging'功能，但是这将 1 of 4, 2 of 4 显示为列表，而不仅仅是 1/4 或 2/4 等，具体取决于显示的幻灯片。

代码：

$(document).ready(function () {
    $('.project-carousel').slick({
        centerMode: true,
        infinite: true,
        centerPadding: '40px',
        slidesToShow: 3,
        dots: true,
        dotsClass: 'custom_paging',
        customPaging: function (slider, i) {

            var slideNumber = (i + 1),
                totalSlides = slider.slideCount;
            return slideNumber + ' of ' + totalSlides;
        },
        responsive: [{
                breakpoint: 768,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 3
                }
            },
            {
                breakpoint: 480,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 1
                }
            }
        ]
    });
    $('.slick-slider').on('click', '.slick-slide', function (e) {
        e.stopPropagation();
        var index = $(this).data("slick-index");
        if ($('.slick-slider').slick('slickCurrentSlide') !== index) {
            $('.slick-slider').slick('slickGoTo', index);
        }
    });


});

演示小提琴

标签： javascriptjqueryslick.js

解决方案

实际上，我已经找到了解决方案，并在下面添加了以下代码：

var $status = $('.counter-info');
var $slickElement = $('.project-carousel');

$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.html( '<span class="current_slide">' + i + '</span> / <span class="total_slides"> ' + slick.slideCount + '</span>');
});

演示：

推荐阅读