本文介绍了滑动滑块：使用箭头导航时，将自定义导航链接标记为活动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用我的平滑滑块的一些自定义导航链接导航到某些幻灯片。
它工作得很好，但如果我从滑块添加内置箭头，则会出现问题。
当我使用这些链接导航时，自定义链接没有获得.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');
});
这篇关于滑动滑块：使用箭头导航时，将自定义导航链接标记为活动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！