I need to compare the data-group attribute of the current slide to the equivalent attribute in a navigation list. If they match, the anchor element in the navigation list should be given an active class.
How can I achieve this using jQuery?
Navigation List HTML
<nav class="timeline__nav">
<ul>
<li class="item">
<a href="#" data-group="group1">1984 to 1988</a>
</li>
... (omitted for brevity)
</ul>
</nav>
Timeline Slider HTML
<div class="timeline__slider">
<div class="slick-slide slick-current slick-active">
<!--Timeline item-->
<div class="timeline__item" data-group="group1">
</div>
... (omitted for brevity)
</div>
Unsuccessful jQuery Attempt
$('.timeline__slider').on('afterChange', function(event, slick, currentSlide, nextSlide) {
$('.slick-current .timeline__item').each(function() {
if ($(this).attr('data-group') == $('.timeline__nav a').attr('data-group')) {
$('.timeline__nav a').addClass('foobar');
}
});
});
$('.timeline__slider').on('afterChange', function(event, slick, currentSlide, nextSlide) {
if ( $('.slick-current .timeline__item').attr('data-group') == $('.timeline__nav a').attr('data-group') ) {
// Add active class to .timeline__nav a element
// Update when data-group changes
$('.timeline__nav a').addClass('foobar');
}
});