Slick Slider：使用箭头导航时将自定义导航 link 标记为活动

Question

我正在使用一些自定义导航链接让我的灵活滑块导航到某些幻灯片。

它工作正常，但如果我从滑块添加内置箭头，我会遇到问题。当我使用这些导航时，自定义链接没有得到 .active class.

有没有办法添加这个class？我知道，我可以使用滑块同步选项来做到这一点。但就我而言，我必须使用自定义链接并且不能使用 asNavFor 选项。

这是我当前的代码（这里的工作示例：https://codepen.io/cray_code/pen/JjObOPa）：

$('.product-gallery').slick({
dots: false,
    arrows: true,
    speed: 300,
    slidesToShow: 1,
    slidesToScroll: 1,
    fade: true,
});

// Custom links
$('a[data-slide]').click(function(e) {
    e.preventDefault();
    var slideno = $(this).data('slide');
    $('.product-gallery').slick('slickGoTo', slideno - 1);
    $('a[data-slide]').removeClass('active');
    this.classList.add('active');
});

多亏了这个。

Answer 1

您可以使用方法afterChange来完成这个任务。这是现场演示 https://codepen.io/sifat009/pen/bGYgBvP

这是实现此目的的 javascript 代码。

$('.product-gallery').slick({
    dots: false,
    arrows: true,
    speed: 300,
    slidesToShow: 1,
    slidesToScroll: 1,
    fade: true,
});

$('.product-gallery').on('afterChange', function(event, slick, currentSlide, nextSlide){
  const link = document.querySelector(`.action a[data-slide="${currentSlide+1}"]`);
    $('a[data-slide]').removeClass('active');
    link?.classList?.add('active');
});

$('a[data-slide]').click(function(e) {
    e.preventDefault();
    var slideno = $(this).data('slide');
    $('.product-gallery').slick('slickGoTo', slideno - 1);
    $('a[data-slide]').removeClass('active');
    this.classList.add('active');
});

Slick Slider：使用箭头导航时将自定义导航 link 标记为活动

Slick Slider: Mark custom nav link as active when navigate with arrows

javascript

css

jquery

slider

slick.js