Używam Slick.js do wyświetlania slajdów na mojej stronie. Działa zgodnie z oczekiwaniami, jednak próbuję dodać licznik suwaka na dole suwaka, który pokazywałby 1/4, jeśli pokazany jest pierwszy slajd, 2/4, jeśli pokazany jest drugi slajd itp. Próbowałem użyć Funkcja dotsClass: 'custom_paging' jednak pokazuje 1 z 4, 2 z 4 jako listę, a nie tylko 1/4 lub 2/4, itd. W zależności od pokazanego slajdu.

Kod:

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


});

Fiddle Demo.

1
user38208 20 listopad 2019, 16:01

1 odpowiedź

Właściwie znalazłem rozwiązanie tego i poniżej dodając poniższy kod:

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

PRÓBNY:

2
user38208 20 listopad 2019, 16:16