1

Есть код для 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

3
  • Что значит "оба счетчики"? Вы создаете только один - var sliderCounter = document.createElement('div');.
    – user176262
    17 сен 2020 в 14:48
  • Вы вот здесь ничего не забыли сделать? - ru.stackoverflow.com/questions/828254/…
    – user176262
    17 сен 2020 в 14:55
  • 1
    Без снипета тяжело что то понять, но попробуйте сделать переменнуюvar sliders = [] и для каждого $slider.each(function(index, element){ // инициировать слайдеры sliders[index].slick})
    – Greg--
    18 сен 2020 в 8:55

1 ответ 1

0

Главной ошибкой оказалось то, что мы работали с массивом слайдеров. Поэтому и при прокрутке одного слайдера, счётчики менялись у обоих. Нужно было работать с каждым по отдельности, то есть использовать .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
        });
    })
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.