Twitter BS - toggle class on <LI> when carousel changes
===

I am using Twitter Bootstrap to build a portfolio that uses the carousel. 
I'm using the following as a way to navigate to certain elements in the carousel:

    <ul id="portfolionav" class="nav nav-pills">
    <li class="" id="carousel-ux"><a href="#myCarousel" data-toggle="pill">UX | UI</a></li>
    <li class="" id="carousel-vd"><a href="#myCarousel" data-toggle="pill">Visual Design</a></li>
    <li class="" id="carousel-web"><a href="#myCarousel" data-toggle="pill">Web</a></li>   
    <li class="" id="carousel-mobile"><a href="#myCarousel" data-toggle="pill">Mobile</a></li>
    <li class="" id="carousel-corpid"><a href="#myCarousel" data-toggle="pill">Identity</a></li>
</ul>

What I am trying to do is apply the active class on an LI tag when a specific element in the carousel is reached. For example, when the carousel slides to element #5, the active class needs to apply to the "mobile" LI tag, and be removed from any of the other LI tags.

Can anyone please give me a idea on how to do this?

Thank you!
		