Как сделать в слайдере slick подсчет слайдов?

Question

[grishaaa]

Как сделать нумерацию я знаю, но вот как сделать, чтобы показывало автоматически сколько всего слайдов в слайдере

Comments

[aloky]

код в студию

[grishaaa]

aloky,

$('.slider').slick({
      dots: true,
      infinite: true,
      speed: 500,
      autoplay: false,
      arrows: true,
      slidesToShow: 1,
	    slidesToScroll: 1,
    });

Answer 1

[Edymov]

Вам нужно выводить перед чертой currentSlide

let currentSlide = $('.slider')).slick('slickCurrentSlide') + 1;

А после черты slideCount
$(".slider").slick("getSlick").slideCount

Comments

[grishaaa]

Edymov Я не понимаю как мне это все записать с этим кодом

$('.slider').slick({
      dots: true,
      infinite: true,
      speed: 500,
      autoplay: false,
      arrows: true,
      slidesToShow: 1,
      slidesToScroll: 1,
    });

[grishaaa]

Edymov Я не понял, что за черта

[Edymov]

grishaaa,
Примерно так:

// Элемент, куда вы хотите записать страницы
let pages = $('.pagingInfo');
// Элемент слайдера
let slider = $('.slider');

slider.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){

   let i = (currentSlide ? currentSlide : 0) + 1;
    pages.text(i + '/' + slick.slideCount);
});

Answer 2

[lodas]

В одну сторону выводишь просто переменную общего кол-ва слайдов slideCount, а к динамической смене цифры применяешь такой код:

/*Смена цифры в слайдере*/
$(".slider").on("afterChange", function(event, slick, currentSlide, nextSlide){
    $(".countsSlides span").text(currentSlide + 1);
});

Comments

[Pit]

А если у меня с slick слайдере находится еще 1 slick слайдер? как мне отобразится правильный подсчет нумерации слайдер главного слайдера? Ссылка на сайт По ссылке внизу есть слайдер отзывов, на мобильной версии там получится в этом слайдере еще 1 слайдер, и моя нумерация страниц считается сколько, сколько слайдов во внутреннем слайдере а не во внешнем, во внешнем 2 слайда, во внутреннем 4, и он показывает 4, а должен 2. Не подскажешь что можно сделать?

var $examplesSlider2 = $('.reviews-slider');
    var examplesSlider2 = $examplesSlider2[0];
    var $paging2 = $('.reviews-slider-paging .paging');


    $examplesSlider2.slick({
        slidesToShow: 1,
        adaptiveHeight: true,
        swipe: true, 
        infinite: false, 
        appendArrows: '.reviews-slider-paging',
        prevArrow: '<button class="slick-arrow slick-prev"></button>',
        nextArrow: '<button class="slick-arrow slick-next"></button>',
    }).on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
        if (!event.target.classList.value.includes('reviews-slider')) {
            return;
        }
        var i = (currentSlide ? currentSlide : 0) + 1;
        if(i > 9) {
            $paging2.html(i + '<span class="slick-devider"></span>' + '<span class="sr">' + slick.slideCount + '</span>');
        } else {
            $paging2.html('0'+i + '<span class="slick-devider"></span>' + '<span class="sr">' + slick.slideCount + '</span>');
        }
        
        
    });


    $('.reviews-gallery-slider').on('mousedown touchmove', function(){

        examplesSlider2.slick.setOption({
            swipe: false,
            touchMove: false,
        });
    });


    $('.reviews-gallery-slider').slick({
            slidesToShow: 3,
            adaptiveHeight: true,
            infinite: false,
            swipe: true,
            prevArrow: '<button class="slick-arrow slick-prev"></button>',
            nextArrow: '<button class="slick-arrow slick-next"></button>',
             responsive: [
                {
                    breakpoint: 640,
                    settings: {
                        
                        slidesToShow: 2,
                    }
                },
                {
                    breakpoint: 479,
                    settings: {
                        
                        slidesToShow: 1,
                    }
                }
            ]
        }).on('afterChange', function(event, slick){
           event.stopPropagation();
            examplesSlider2.slick.setOption({
                swipe: true,
                touchMove: true,
            });
        });