Question

I am working on a carousel.

Whenever a slide changes, I get the index value of that slide.

There are three slides! so 0-2 are the index values.

Now I have this html on the page, for three dots, which indicate which slide is active. So if the dot is white, the slide is active.

This is simply done by adding the “act” class to the element.

<a id="th_1" class="thumb act"></a>
<a id="th_2" class="thumb"></a>
<a id="th_3" class="thumb"> </a>

Above you can see “th_1” is active. The others have all grey dots in the css.

Anyways, I have the index by this js code:

var slide = $(this).find('.slideshow.activated');
var index = slide.index();

Above, we find the element in this slide DIV, which has the classes item and active.
“this” is a container div.

I just don’t know how to make this into a function, which adds the “act” class to the correct html element as above.

perhaps I should change the element names to become zero-based (th_0, th_1, th_2) and use some regex?

I am wondering if anyone knows any tips on this.

Thanks

Answer 1

$('.thumb').removeClass('act').eq(index).addClass('act');