CODEWITHSUNDEEP
javascripthtmljquerycss
Mike Hermary
Mike Hermary

Reputation: 376

jQuery Add class to element if data attribute matches current slide in Slick Slider

I am needing to compare a current slide's data-group attribute to the equivalent attribute in a nav list. If they match, the anchor element in the nav list should have an active class applied.

How do I go about doing this in jQuery?

Nav List HTML

<nav class="timeline__nav">
  <ul>
    <li class="item">
      <a href="#" data-group="group1">1984 to 1988</a>
    </li>
    <li class="item">
      <a href="#" data-group="group2">1989 to 1992</a>
    </li>
    <li class="item">
      <a href="#" data-group="group3">1993 to 1999</a>
    </li>
    <li class="item">
      <a href="#" data-group="group4">2000 to 2002</a>
    </li>
    <li class="item">
      <a href="#" data-group="group5">2003 to 2005</a>
    </li>
    <li class="item">
      <a href="#" data-group="group6">2006 to 2012</a>
    </li>
    <li class="item">
      <a href="#" data-group="group7">2013 to 2020</a>
    </li>
  </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>
    <!--/Timeline item-->
  </div>
  <div class="slick-slide slick-active">
    <!--Timeline item-->
    <div class="timeline__item" data-group="group1">
    </div>
    <!--/Timeline item-->
  </div>
  <div class="slick-slide">
    <!--Timeline item-->
    <div class="timeline__item" data-group="group2">
    </div>
    <!--/Timeline item-->
  <div class="slick-slide">
    <!--Timeline item-->
    <div class="timeline__item" data-group="group2">
    </div>
    <!--/Timeline item-->
  </div>
  <div class="slick-slide">
    <!--Timeline item-->
    <div class="timeline__item" data-group="group3">
    </div>
    <!--/Timeline item-->
  </div>
  <div class="slick-slide">
    <!--Timeline item-->
    <div class="timeline__item" data-group="group3">
    </div>
    <!--/Timeline item-->
  </div>
</div>

Unsuccessful jQuery

$('.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');
  }
});

Upvotes: 1

Views: 1231

Answers (3)

charlietfl
charlietfl

Reputation: 171700

All you really need is the matching index to the current slide assuming they are in same order as the slides

const $navLinks =  $('.timeline__nav a')

$('.timeline__slider').on('afterChange', function(event, slick, currentSlide, nextSlide) {

   $navLinks.removeClass('foobar')
            .eq(currentSlide)
            .addClass('foobar')
    
});

Upvotes: 0

azizanhaniff
azizanhaniff

Reputation: 31

Below is a minor modification based on your script

$('.timeline__slider').on('afterChange', function(event, slick, currentSlide, nextSlide) {
    // Remove foobar class to all anchor elements within .timeline__nav that has foobar as class.
    $('.timeline__nav a.foobar').removeClass('foobar');

    $('.slick-current .timeline__item').each(function() {
        // Add foobar class to all anchor elements within .timeline__nav
        // where value for its data-group attribute is same as current slide's data-group attribute.
        $('.timeline__nav a[data-group="' + $(this).attr('data-group') + '"')
            .addClass('foobar');
    });
});

You can replace .slick-current with .slick-active if you wish to add the foobar class based on all slides that are currently visible, and not just the single slide selected.

Upvotes: 0

Kinglish
Kinglish

Reputation: 23664

One way: You could just search for all matches to .timeline__item that have the matching data-group and test for length.

$('.timeline__slider').on('afterChange', function(event, slick, currentSlide, nextSlide) {
  let dg = 'data-group="' + $('.timeline__nav a').data("group") + '"';
  let ok = $('.slick-current .timeline__item[' + dg + ']').length>0;
  if (ok) $('.timeline__nav a').addClass('foobar');
});

Upvotes: 0

Related Questions