I have implemented custom navigation links for my slick slider in order to navigate to specific slides. The functionality works perfectly, but I encountered an issue when I added the built-in arrows provided by the slider.
Whenever I use these arrows to navigate, the custom links do not receive the ".active" class that they should have. Is there a way to add this class to the custom links even when using the slider's built-in arrows? Unfortunately, I am unable to utilize the "asNavFor" option and must stick with the custom links.
Below is my current code (you can find a working example here: 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');
});
Thanks to this insightful answer.