带有光滑滑块的自定义导航与轮播幻灯片不同步答案

【问题标题】：Custom nav with slick slider going out of sync with carousel slides带有光滑滑块的自定义导航与轮播幻灯片不同步
【发布时间】：2018-10-18 15:37:19
【问题描述】：

我正在使用Slick Slider 创建产品轮播。

此示例显示轮播中的 4 个产品。当您跳过幻灯片时，产品上方的导航匹配：Example

此示例显示 2 个产品。它正在克隆幻灯片以确保屏幕上总是有 3 个。这样做的问题是，当您跳过时，产品上方的导航会不同步：Example。基本上，当您在克隆幻灯片上时，当它跳到原始幻灯片时，导航会重新同步。

我怎样才能让它匹配？

这是我的完整代码：

    // Category gallery

    // Set preferred slidesToShow
    var slidesToShow = 3; // always 3

    // Clone the slides.
    var $slides = $('.category-gallery .slide');
    if ($slides.length < slidesToShow + 1) {
        var $slide;
        $slides.each( function(){
            $slide = $(this).clone(true)
                .insertAfter( $slide || $slides.last() )
                .addClass('slick-cloned-2')
                .attr('id', '');
        });
    }

    $('.category-gallery').slick({
        dots: false,
        infinite: true,
        slidesToShow: slidesToShow,
        slidesToScroll: 1,
        autoplay: false,
        pauseOnHover:false,
        focusOnSelect: false,
        centerMode:true,
        arrows: true,
    });

    $('a.category-nav[data-slide]').click(function(e) {
        e.preventDefault();
        var slideno = $(this).data('slide');
        $('.category-gallery').slick('slickGoTo', slideno - 1);
    });

    $('a.category-nav[data-slide="1"]').addClass("highlighted-cat-nav");
    $('.category-gallery').on('afterChange', function(event, slick, currentSlide, nextSlide){
        $('a.category-nav').removeClass('highlighted-cat-nav');
      $('a.category-nav[data-slide=' + (currentSlide + 1) + ']').addClass('highlighted-cat-nav');
    });

问题似乎出在这一行：

      $('a.category-nav[data-slide=' + (currentSlide + 1) + ']').addClass('highlighted-cat-nav');

【问题讨论】：

(currentSlide%2 + 1) 怎么样，好像你只有 2 件产品就有这个问题。
嗨，罗伯。你为什么禁用var i = currentSlide >= slidesToShow ? currentSlide - slidesToShow : currentSlide;？这应该工作，就像它一样。尝试重新启用它并将(currentSlide + 1)更改为i。
@SallyCJ 我发现了一些问题。当滑块中超过 3 个时，它会破坏导航，它只会转到第 3 个产品，然后返回到开始（而不是导航中的第 4 个项目），当少于 3 个产品时，它不会将它们居中。（现在查看两个链接以查看问题）。不过距离很近。
“它正在克隆幻灯片以确保屏幕上总是有 3 个” - 你知道 slick 有一个内置选项吗？

标签： jquery slick.js

【解决方案1】：

参考我的评论，问题可能是因为data-slide是从1开始的，而currentSlide是从0开始的。

其次，当手动幻灯片克隆不需要时，我们应该只使用currentSlide + 1。

所以更改以下内容：

// Clone the slides.
var $slides = $('.category-gallery .slide');
if ($slides.length < slidesToShow + 1) {

到这个：

// Clone the slides.
var $slides = $('.category-gallery .slide'),
    clone_slides = ($slides.length <= slidesToShow),
    slides_count = Math.min($slides.length, slidesToShow);

if (clone_slides) {

然后试试这个：

$('.category-gallery').on('afterChange', function(event, slick, currentSlide, nextSlide){
    var i = clone_slides ?
        (currentSlide >= slides_count ? currentSlide - slides_count : currentSlide) + 1 :
        currentSlide + 1;
    $('a.category-nav').removeClass('highlighted-cat-nav');
  $('a.category-nav[data-slide=' + i + ']').addClass('highlighted-cat-nav');
});

PS：确保使用唯一的变量名——即slidesToShow、clone_slides、slides_count、slidesToShow2、clone_slides2、@987654332 @ 等。然后确保在您复制的使用这些变量的代码中使用 专有名称。

【讨论】：

clone_slides = ($slides.length < slidesToShow + 1) 也可以。但我选择使用clone_slides = ($slides.length <= slidesToShow)。
嗨，Sally，效果很好，再次感谢您的帮助......像往常一样全面。在带有 2、3、4 张以上幻灯片的轮播上对其进行了测试，并且对所有幻灯片都有效。
嗨，Rob，不客气，我很高兴它运作良好。 =)

【解决方案2】：

尝试添加这个 if 语句。可能需要一些额外的调整。

$('.category-gallery').on('afterChange', function (event, slick, currentSlide, nextSlide) {

  if(currentSlide >= $slides.length) { // added this if
    currentSlide -= $slides.length
  }

  $('a.category-nav').removeClass('highlighted-cat-nav');
  $('a.category-nav[data-slide=' + (currentSlide + 1) + ']').addClass('highlighted-cat-nav');
});

【讨论】：