How to create a vertical carousel/ticker with dynamically created pagination thumbs

Question

NOTE: Although I'm using CarouFredSel right now, I don't have any preference for a specific plugin.. I'm only interested in accomplishing the goal of the task,.. so if you have suggestions, please make a comment ! :D Thanks

Here is what I'm trying to do:

I have boxes that contain dynamically created HTML content for which I need to:

1) provide a vertical (upward) carousel/ticker effect of the content, ONLY if there are more than 4 items loaded into the box.

2) If there are > 4 items, start the carousel/ticker, allow for pause on mouseover, resume on mouseout and provide navigation to change directions (up/down) or to step forward/backward per item in the carousel

3) There is a div at the bottom of each box. If the box has > 4 items, then I need to run through each item, get the source for an image within it (img.bimage) and build a pagination of thumbs within that div at the bottom of the box. This should allow the user to click a thumb and have the list scroll to it.

Here is a working example of where we are so far: http://jsfiddle.net/revive/jZMhE/

(note, the pagination callback is commented out of the JS, but that is what the pagination should look like)

Please let me know if you have suggestions on how to accomplish these things with CarouFredSel OR ANOTHER Plugin or function.. We're not stuck on using one thing or another.. we're stuck on making it work :D

Thanks for your help!!

Answer 1

After some JS crunching and hair pulling.. I decided to forego the function within CarouFredSel and used this example: http://jsfiddle.net/revive/jZMhE/