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

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

该代码实际上没有任何作用，因为触发afterChange事件时，$status变量在该闭包中未初始化，您应该使用此代码来更新该跨度的文本：

$('.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行的回调将{ {1}}（包含您所有的$status）文本到shopteaser-slider currentSlide值。

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

解决方案：

在594行更具体：.pagingInfo span或其他内容。

在第613和616行：$('.pagingInfo span', $('.shopteaser-slider').parent())更具体：$('.next-slide').click或更具体。

或者仅使用ID。

希望有帮助。

页面上有多个滑动条……不必要的同步滑动

1 个答案: