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

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

尝试添加此 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');
});

Answer 2

参考我的评论，问题可能是因为 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, slides_count2, 等。然后确保在代码中使用 专有名称 使用这些变量的复制。

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

Custom nav with slick slider going out of sync with carousel slides

jquery

slick.js