Многократный скользящий слайдер на странице ... нежелательное синхронное скольжение

Question

• Страница с несколькими ползунками на основе скользящего слайдера.
• Некоторые используют пользовательский пейджинг.
• Все ползунки с настраиваемой подкачкой перемещаются синхронно, но не должны.

У меня есть страница с несколькими ползунками на основе скользящего слайдера. Вот ссылка http://www.kryolan.einfach -beginnen.de / home.html Некоторые из этих ползунков используют пользовательский пейджинг, чтобы показать что-то вроде 1/4 или 2/4 и пользовательскую кнопку перехода вперед / назад. Прекрасно работает, но все слайдеры с пользовательской страницей на этой странице двигаться синхронно. И я не могу понять почему. Я не хочу, чтобы они двигались синхронно. Все остальные ползунки в порядке.

Я также пытался назвать их «по-настоящему отдельными», называя их отдельными с их ID. Но это ничего не изменило.

Полагаю, это что-то с пейджингом, но я не могу понять, почему и как.

Есть идеи?

Мой код:

   $('.trendlooks .product-slider').each(function(){          
      var $status = $(this).closest('.pagingInfo span');
      var $slickElement = $(this);

      $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.text(i + '/' + slick.slideCount);
      });

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

      $slickElement.parent().find('.pagingInfo .next-slide').click(function(){
            $slickElement.slick('slickNext');
            console.log($slickElement.attr('id'));
        });
      $slickElement.parent().find('.pagingInfo .prev-slide').click(function(){
            $slickElement.slick('slickPrev');
        });
    });

Answer 1

Только что проверил ваш сайт, и есть две проблемы, вызывающие это, и это не связано с кодом, который вы вставили сюда.

Этот код на самом деле ничего не делает, потому что переменная $status не инициализируется в этом замыкании, когда происходит событие afterChange, вы должны использовать этот код вместо этого, чтобы обновить текст этого диапазона:

$('.pagingInfo span', slick.$slider.parent()).text(i + '/' + slick.slideCount)

Проблема вызывает "поддельные обновления", во-первых, в main.js строка 594:

var $status = $('.pagingInfo span');

После этого вызова переменная $status содержит ВСЕ из .pagingInfo промежутков, а не только тот, который находится внутри .shopteaser-slider.

В строках 613 и 616 вы снова добавляете прослушиватель щелчков ко ВСЕМ кнопкам next и prev (не только для кнопок shopteaser-slider), чтобы вызвать событие на shopteaser-slider, а после этого обратный вызов в строке 597 устанавливает $status (который содержит весь ваш .pagingInfo span) текст в значение currentSlide shopteaser-slider.

Вот почему вы видите, что все синхронизировано.

Решение:

Будьте более конкретны в строке 594: $('.pagingInfo span', $('.shopteaser-slider').parent()) или что-то в этом роде.

А в строках 613 и 616: вместо $('.next-slide').click быть более конкретным: $('.next-slide', $('.shopteaser-slider').parent()) или что-то более конкретное.

Или просто используйте ID-ы.

Надеюсь, это поможет.