jQuery Cycle Custom Navigation

Question

Using the jQuery Cycle plugin to create a slideshow of content (not pictures) - how would i make the below code work?

This is my slideshow content:

        <div id="slideshow">
            <div>
                <h1>Title One</h1>
                <p>Description for title one</p>         
            </div>
            <div>
                <h1>Title two</h1>
                <p>Description for title two</p>         
            </div>
            <div>
                <h1>Title Three</h1>
                <p>Description for title three</p>         
            </div>
            <div>
                <h1>Title Four</h1>
                <p>Description for title four</p>         
            </div>
        </div>

And this is the custom nav below:

        <div id="slideshow-nav">
            <ul>
                <li>
                    <a href="#">
                        <span class="thumb one"></span>
                        <span class="title">One</span>
                        <span class="desc">Desc one</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="thumb two"></span>
                        <span class="title">Two</span>
                        <span class="desc">Desc two</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="thumb three"></span>
                        <span class="title">three</span>
                        <span class="desc">Desc three</span>
                    </a>
                </li>
                <li class="last">
                    <a href="#">
                        <span class="thumb four"></span>
                        <span class="title">Four</span>
                        <span class="desc">Desc Four</span>
                    </a>
                </li>

            </ul>
        </div>

Obviously i want the anchor links in the nav to correspond to the right slide above. I'd also like an "active" class added to the current selected nav if thats possible?

As an example, Brightcove (http://www.brightcove.com/en/) do more or less what i'm trying to achieve on there slideshow.

Thanks

Answer 1

Problem solved:

I used this code:

        $('#slideshow').cycle({
            fx: 'scrollHorz',
            speed: 500,
            timeout: 8000,
            pause: 1,
            cleartype: true,
            cleartypeNoBg: true,
            pager: '#slideshow-nav',
            pagerAnchorBuilder: function(idx, slide) {
                return '#slideshow-nav li:eq(' + (idx) + ')';
            }
        });

        $('#slideshow-nav li').click(function() { 
            $('#slideshow').cycle('pause'); 
        });

        $.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
            $(pager).find('li').removeClass('activeLI') 
                .filter('li:eq('+currSlideIndex+')').addClass('activeLI'); 
        }; 

Make sure you use the "jquery.cycle.all.min.js" aswell rather than the lite version as this doesn't support the pager option.