Link 'active' state on two separate HTML elements

Question

I'm trying to mirror the 'active' state on two unordered lists using jquery/javascript. The first list is a slider/carousel and the 2nd list will be navigation links.

Eg

<ul class="carousel">
 <li class="active">Slider 1</li>
 <li>Slider 2</li>
 <li>Slider 3</li>
 <li>Slider 4</li>
</ul>

<ul class="nav">
 <li class="active"><a href'#">Link 1</a></li>
 <li><a href'#">Link 2</a></li>
 <li><a href'#">Link 3</a></li>
 <li><a href'#">Link 4</a></li>
</ul>

So, the idea is that when the active state of the <li> in the carousel changes, so does the corresponding <li> in the 'nav' list.

Any help would be greatly appreciated.

Answer 1

I worked something out from several SO posts:

$(document).ready(function() {
  $('.carousel').bind('DOMSubtreeModified', function(e) {
      $(".nav>li.active").removeClass("active");
      $(".nav>li").eq($(".carousel").index($("active"))).addClass("active");
  });
});

Just add this to your Javascript and its done.

What it does: First you bind any DOM-Changes (you've said it's changed by a wp plugin or so) in the .carousel element to a new function. Inside the function you remove the active li tag, then you pick the index of the active carousel element and add the .active tag to the nav element with the index from the .carousel

Hope this helps

EDIT : There was a mistake in the code, some unneccesary line i kept in from testing. Please take the updated code

Answer 2

If you don't have access to the code of Wordpress plugin you have no direct way to do it , but can use a setTimeOut function. This is not the cleanest of the approaches , but I guess there is no other option.

 setInterval(function() { if ($(".carousel li").hasClass("active")) { var active = $(".carousel").find(".active"); var index = $(active).index(); index = index + 1; $(".nav li:nth-child(" + index + ")").addClass("active"); } }, 1000); 

 .active { color: red; } .active a { color: red } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="carousel"> <li class="">Slider 1</li> <li class="active">Slider 2</li> <li>Slider 3</li> <li>Slider 4</li> </ul> <ul class="nav"> <li class=""> <a href="">Link 1</a> </li> <li><a href="">Link 2</a> </li> <li><a href="">Link 3</a> </li> <li><a href="">Link 4</a> </li> </ul> 

Answer 3

I've created a working example here: https://jsfiddle.net/aj68mogk/14/

It was not working for you on JSFiddle because the script does not change the carousels .active class, thats done by the wp plugin.

I've put in a link to "fake" the action the plugin does (changing the carousel state). There was a mistake in the part of code wich gets the index of the active carousel li.

So please ignore the code of my first answer and take the one of the JSFiddle. But dont forget to remove the fake link and its click function when using this on your page

Next thing is you have to select a Jquery version on JSFiddle, otherwise the $(document).ready() function is never entered, because its not pure js.

Hope this helps, if there are questions left, just leave a comment