CODEWITHSUNDEEP
javascriptjqueryslick.js
user38208
user38208

Reputation: 1094

Adding a slide count in slick.js

I'm using Slick.js to show slides on my page. It is working as expected however I am trying to add a slider counter to the bottom of the slider that would show 1/4 if the fist slide is shown, 2/4 if the second slide is shown, etc. I have tried to use dotsClass: 'custom_paging' function however this shows 1 of 4, 2 of 4 as a list rather than just 1/4 or 2/4 , etc depending on the slide that is shown.

Code: 

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


});

DEMO FIDDLE

Upvotes: 1

Views: 4150

Answers (1)

user38208
user38208

Reputation: 1094

Actually I have found the solution to this and its below adding the below code:

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

DEMO:

Upvotes: 2

Related Questions