Question

我正在使用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');

Answer 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，{{1} }，slidesToShow2，clone_slides2等。然后确保在复制的代码中使用这些变量使用专有名称。

Answer 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');
});

带有滑动滑块的自定义导航与旋转木马幻灯片不同步

2 个答案: