Счётчики slick-слайдеров рабоают неправильно, если слайдеров несколько

Question

Есть код для slick-слайдера. В нём дополнительно есть добавление счётчика. Счётчик работает прекрасно. Но только, если слайдер на странице один. Если слайдеров двое, то при пролистывании первого слайдера, срабатывает только второй. А счётчик первого слайдера не работает.

jQuery(function (jQuery) {
  var $slider = jQuery('.slider');

  if ($slider.length) {
    var slidesCount;
    var sliderCounter = document.createElement('div');
    sliderCounter.classList.add('counter');

    var updateSliderCounter = function (slick) {
      var currentSlide = slick.slickCurrentSlide() + 1;
      slidesCount = slick.slideCount;
      jQuery(sliderCounter).text(currentSlide + ' / ' + slidesCount)
    };

    $slider.on('init', function (event, slick) {
      $slider.append(sliderCounter);
      updateSliderCounter(slick);
    });

    $slider.on('afterChange', function (event, slick) {
      $slider.each(function () {
        updateSliderCounter(slick)
      });
    });

    $slider.slick({
      infinite: true,
      speed: 300,
      autoplay: false,
      autoplaySpeed: 4000
    });
  }
});

Насколько я увидел, то оба счётчики работают, но первый не отображается в разметке.

Мне кажется, что проблема находится в функции updateSliderCounter и в функции, срабатывающей при событии afterChange

Answer 1

Главной ошибкой оказалось то, что мы работали с массивом слайдеров. Поэтому и при прокрутке одного слайдера, счётчики менялись у обоих. Нужно было работать с каждым по отдельности, то есть использовать .each(). В итоге скрипт у меня выглядит следующим образом (+ некоторые другие коррективы, не имеющие прямого отношения к вопросу)

jQuery(function ($) {
    $('.range-section').each(function (index, section) {
        var $section = $(section);
        var $slider = $section.find('.range-section__slider');
        var slidesCount;

        var updateSliderCounter = function (slick) {
            var $counter = $section.find('.range-section__counter');
            var currentSlide = slick.slickCurrentSlide() + 1;
            slidesCount = slick.slideCount;

            $counter.text(currentSlide + ' / ' + slidesCount);
        };

        $slider.on('init afterChange', function (event, slick) {
            updateSliderCounter(slick);
        });

        $slider.slick({
            infinite: true,
            speed: 300,
            autoplay: false,
            autoplaySpeed: 4000
        });
    })
});

БЛОГ НА HUSL

Счётчики slick-слайдеров рабоают неправильно, если слайдеров несколько

Ответы (1 шт):