javascript - JQuery addClass to thumbnail when slide is active -

I am creating a slider functionality with scratch. I have a list of slides and the "active-slide" in the current slide There is a class.

  & lt; Ul class = "slide" & gt; & Lt; Li class = "active-slide" & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; / Li & gt; & Lt; / Ul & gt;  

Then I have a list of related thumbnails, when you click on them, the slider shows this slide.

  & lt; Ul class = "thumbnails" & gt; & Lt; Li & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; / Li & gt; & Lt; / Ul & gt;  

All this is working properly and the slider slider changes and the class adds "Active-Slide" What I'm trying to do is listen to the "Active-Slide" category And then add a square "active-thumb" to the related thumbnail so that the user knows which thumbnails are currently active. The slider is using the last, next, as well as pointing to the page, so it's serious that I'm always listening to "active-slides" because it changes every 10 seconds

I Backbone I am using JS and how to check the active slide index and join the active thumb class of "Active-thumbs" in the corresponding / matching index of the thumb. .

Thank you!

Create a custom attribute.

  & lt; Ul class = "slide" & gt; & Lt; Li data-index = "1" square = "active-slide" & gt; & Lt; / Li & gt; & Lt; Li data-index = "2" & gt; & Lt; / Li & gt; & Lt; Li data-index = "3" & gt; & Lt; / Li & gt; & Lt; Li data-index = "4" & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Ul square = "thumbnail" & gt; & Lt; Li data-index = "1" & gt; & Lt; / Li & gt; & Lt; Li data-index = "2" & gt; & Lt; / Li & gt; & Lt; Li data-index = "3" & gt; & Lt; / Li & gt; & Lt; Li data-index = "4" & gt; & Lt; / Li & gt; & Lt; / Ul & gt;  

When you click Next or Last:

  $ ("thumbnail [data-index = '" + $ ('. -Slide ') .attr (' data-index ') + "']"). AddClass ("active-thumb");  

The code was not tested but I think you get this idea.

Edit:

Activate the current index to activate Remove all active and re-enable active with the already saved current index.

  // Let's say we click on the next var current index = $ ('.solices .active-slide'). 'Data index'); $ ("Thumbnail taken"). RemoveClass ("active-thumbs"); $ ("Thumbnail [data-index = '" + (current index + 1) + "']"). AddClass ("active-thumb");  

Of course, you need a bit more to end or to check the beginning of the slide, but I'm sure you can handle it.