I want to use a link to go to a certain slide inside a slick slider.
At the moment I'm using the following code for that (You can see it here: https://codepen.io/cray_code/pen/xxPRLKK):
<div class="slider slider-for">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</div>
<div class="action">
<a href="#" data-slide="3">go to slide 3</a>
<a href="#" data-slide="4">go to slide 4</a>
<a href="#" data-slide="5">go to slide 5</a>
</div>
And this JS code:
$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider').slick('slickGoTo', slideno - 1);
});
It works fine to jump do a certain slide.
But I need to mark the current slide inside the navigation as active and add a class .active to the link.
Is that possible?
I know that there is a thing like slider syncing with asNavFor. But I can't use that in my case.
You can add an active class when clicking on those nav items. You can see it here https://codepen.io/sifat009/pen/VwrmzPm
Here is the code i've changed.
$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider').slick('slickGoTo', slideno - 1);
$('a[data-slide]').removeClass('active');
this.classList.add('active');
});