滑动滑块:使用箭头导航时,将自定义导航链接标记为活动

本教程将介绍滑动滑块:使用箭头导航时,将自定义导航链接标记为活动的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

滑动滑块:使用箭头导航时,将自定义导航链接标记为活动 教程 第1张

问题描述

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

它工作得很好,但如果我从滑块添加内置箭头,则会出现问题。
当我使用这些链接导航时,自定义链接没有获得.active类。

有什么方法可以添加这个类吗?我知道,我可以使用滑块同步选项来做到这一点。但在我的情况下,我必须使用自定义链接,并且不能使用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。

推荐答案

您可以使用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');
});

好了关于滑动滑块:使用箭头导航时,将自定义导航链接标记为活动的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。