Syncing Navigation Links to Cyle with Slider

Hi,

I am currently using Revolution Slider for my slider, so I am not sure if this is the right forum. Basically what I am trying to do is to write a code that would sync up my nav links in my header with the slider. What I mean is that just like like bulleted navigation in the slider, my client wants the links at the top to connect to and change font color as the slides cycle through. So link1 would change when slide 1 appears, link2 would change when slide 2 appears, etc.

So far what I have tried to do is simply include the styles of the bullets to the nav menu and hope the jQuery would automatically apply the script to those elements. After adding class via jQuery as well as the menu editor, here are what the two sections look like:

<!-- This is the Nav menu... notice that ul#menu-landing-page has the class "tp-bullets" appended to it.  This is to match the container that the script for Revolution Slider is targeting. Also notice that each li has the class "bullet" included. -->
<ul id="menu-landing-menu" class="x-nav sf-menu sf-js-enabled tp-bullets">
<li id="menu-item-31" class="bullet first menu-item menu-item-type-custom menu-item-object-custom menu-item-31"><a href="#">Build Your Network</a></li>
<li id="menu-item-29" class="bullet menu-item menu-item-type-custom menu-item-object-custom menu-item-29"><a href="#">Find New Players</a></li>
<li id="menu-item-32" class="bullet menu-item menu-item-type-custom menu-item-object-custom menu-item-32"><a href="#">Arrange Matches</a></li>
<li id="menu-item-33" class="download bullet last menu-item menu-item-type-custom menu-item-object-custom menu-item-33"><a href="#">Download</a></li>
<li id="menu-item-443" class="icon-twitter menu-item menu-item-type-custom menu-item-object-custom menu-item-443"><a href="http://https://twitter.com/ZOGOtennis">Twitter</a></li>
<li id="menu-item-445" class="icon-instagram menu-item menu-item-type-custom menu-item-object-custom menu-item-445"><a href="http://instagram.com">Instagram</a></li>
<li id="menu-item-444" class="icon-facebook menu-item menu-item-type-custom menu-item-object-custom menu-item-444"><a href="http://www.facebook.com/zogotennis">Facebook</a></li>
</ul>

<!-- The slider's bullets -->
<div class="tp-bullets simplebullets round hidebullets" style="bottom: 20px; left: 50%; margin-left: -80px;">
<div class="bullet first selected"></div>
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet last"></div><div class="tpclear"></div>
</div>

If you visit the site, you can see what I mean and the relevant js code… http://zogotennis.com/home . There are probably other methods I can use here, so if you have any ideas, please by all means let me know. BTW, the client wants the bullets as well as arrows, and the slider will not let me include any other type of navigation directly.