Cycle Plugin - pager nav

Cycle Plugin - pager nav

Instead of the numbers to page through the imags, I'd like to have a simple list of words describing the images for navigation, as well as the background to change when it's corresponding image is showing.
I'm using the 'updateActivePagerLink' demo as the example found here.

HTML:
  1. <div id="gallery"><div id="slider-nav">
                
    <ul>
                    
    <li><a href="#">Carbonara</a></li>
                    
    <li><a href="#">Coffee</a></li>
                    
    <li><a href="#">Coffee Shake</a></li>
                
    </ul>
            
    </div>
        
    <div id="slide">
        
    <img src="images/carbonara.png"/>
        
    <img src="images/coffee.png"/>
        
    <img src="images/coffee-shake.png"/>
        
    </div><!-- end of slide -->
    </div><!-- end of gallery -->
Script: 
  1. <script type="text/javascript">
    $
    (document).ready(function(){
        $
    ('#slide').cycle({
            fx
    :     'scrollVert',
            speed
    :  '500',
            timeout
    : 4000,
            pagerEvent
    : 'hover',


              pagerAnchorBuilder


    : function (index,slide) {
        
    return '#slider-nav li:eq(' + (index) + ') a' ;
    },
    activePagerClass
    :'active'



        



    });


    });
    </script>

I'd like the background of the text to turn a different color when its corresponding image is being shown:

  1. .active{background-color: green;}





    • Topic Participants

    • mpr