I've been implementing the code for the flex slider which allows links/buttons outside of the flex slider to target specific slides with rel tags as provided by LJ902 here: jQuery FlexSlider hide Slider but retain visibility of Manual Controls
Now I'm curious how I would be able to change the css state of the targeting link/button (giving it a different colored background to indicate it's active state), when the flex slider is positioned within a section of slides.
So for instance in the example below, when the slider at a state between the images images/section2-Image01.jpg thru images/section2-Image03, the css state of slide-thumb link for Section 2 is changed , for the slides in section 3 the css state of slide-thumb link for Section 3 is changed and the styling for section 2 goes back to it's previous state. In essence creating tab like functionality that flows over when the users slides/clicks though into the next section
<a rel="0" class="slide_thumb" href="#">Section 1</a>
<a rel="3" class="slide_thumb" href="#">Section 2</a>
<a rel="6" class="slide_thumb" href="#">Section 3</a>
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/section1-Image01.jpg" />
</li>
<li>
<img src="images/section1-Image02.jpg" />
</li>
<li>
<img src="images/section1-Image03.jpg" />
</li>
<li>
<img src="images/section2-Image01.jpg" />
</li>
<li>
<img src="images/section2-Image02.jpg" />
</li>
<li>
<img src="images/section2-Image03.jpg" />
</li>
<li>
<img src="images/section3-Image01.jpg" />
</li>
<li>
<img src="images/section3-Image02.jpg" />
</li>
<li>
<img src="images/section3-Image03.jpg" />
</li>
</ul>
</div>
Could anyone help me out with this? My mediocre development skills have been stumped by this over the last day or so.Thanks!