javascript - 页面上有多个光滑的 slider ...不需要的同步滑动

Question

• 基于 slick-slider 的具有多个 slider 的页面。
• 有些使用自定义分页。
• 所有具有自定义分页的 slider 都会同步移动，但它们不应该同步移动。

我有一个带有多个基于 slick-slider 的 slider 的页面。这是一个链接http://www.kryolan.einfach-beginnen.de/home.html其中一些 slider 使用自定义分页来显示 1/4 或 2/4 之类的内容以及自定义上一页下一页按钮。效果很好，但此页面上的所有 slider 均具有自定义分页同步移动。我不知道为什么。我不希望它们同步移动。所有其他 slider 都很好。

我还试图用他们的 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

刚刚检查了您的网站，有两个问题导致了此问题，并且与您在此处粘贴的代码无关。

该代码实际上什么也没做，因为当 afterChange 事件被触发时， $status 变量在该闭包中未初始化，您应该使用此代码来更新该范围的文本:

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

导致“假更新”的问题首先出现在 main.js 第 594 行:

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

在此调用之后，$status 变量保存所有 .pagingInfo 范围，而不是 .shopteaser-slider 内的唯一一个范围.

在第 613 和 616 行，您再次向所有下一个和上一个按钮(不仅仅是 shopteaser-slider 按钮)添加一个点击监听器，以触发 shopteaser-slider 上的事件，之后，第 597 行的回调设置 $status(保存所有 .pagingInfo span)文本到 shopteaser-slider currentSlide 值。

这就是为什么您会看到所有内容都已同步。

解决方案:

在第 594 行更具体:$('.pagingInfo span', $('.shopteaser-slider').parent()) 或其他内容。

第 613 行和第 616 行:使用 $('.next-slide').click 更具体:$('.next-slide', $('.shopteaser) -slider').parent()) 或更具体的内容。

或者只使用 ID-s。

希望有帮助。