Adding Custom functionality to jquery slider.

Question

I need to create a custom image slider with some functionality that I've never seen before.

I'd like to use an existing jquery slider if I could (something like - http://nivo.dev7studios.com/) and then customize it but I'm really not sure were to start.

I need to have 4 boxes each with a small image within. Below would be a slider that would auto rotate between 4 promo (one for each section).

The Functionality I'm looking for is when a user rollsover one of the section boxes the slider below would display the promo for that section. The user could also either click on the promo or on the section box to be redirect to that page.

Any thought on how I could do this? I would need to have a rollover and click effect of the section boxes that would control the auto slider.

Does anyone know of any example of this that I could use or might help out?

Thanks

Answer 1

I would use a mix of bxslider (http://bxslider.com/) and a jquery hover perhaps qtip( http://craigsworks.com/projects/qtip/demos/content/attributes) for when you want the promo to come up. Then you just do a foreach for the different data for links/images you want to populate. I haven't tested this so unsure if it will work, just giving you a idea/direction.

<ul id="slides1">
            foreach
                <li>href, img, qtip</li>
            <?}?>
</ul>