Как реализовать счетчик мульти-слайдера?

Question

[Patris546]

Слайдер состоит из 9 слайдов, выводиться по 4 слайда на экран, т. е. 3 стека. Подскажите пожалуйста, как реализовать счетчик 1/3 (по числу стеков, а не слайдов). Например, если использовать слик-слайдер

Comments

[Froggyweb]

если slick -считать самому на js
на мобилке тоже 4 слайда?

Answer 1

[Roman]

https://kenwheeler.github.io/slick/

Answer 2

[Irtaza Khan]

Привет! Замечательная задача — считать пакеты слайдов (стэки) вместо отдельных слайдов. Вот более "человечный" подход, как это можно сделать без излишней громоздкости:

$('.slider').on('init afterChange', function(event, slick, currentSlide) {
  const slidesToShow = slick.options.slidesToShow || 4; // например, 4 слайда на экран
  const totalStacks = Math.ceil(slick.slideCount / slidesToShow);
  const currentIndex = (currentSlide || 0);
  const currentStack = Math.floor(currentIndex / slidesToShow) + 1;

  $(this).find('.slider-stack-counter').text(`${currentStack} / ${totalStacks}`);
}).slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  // ... ваши параметры
});