How to synchronize the horizontal scroll bar of jQuery.SerialScroll with the slider contents?

I am using jquery SerialScroll on my web page to slide around 20 images and it's working perfectly fine.Now i want to do this:

As their are 20 images to slide so a scroll bar comes under the sliding images(or i can say at the end point of the sliding div) and this scroller automatically updates as images slides,so now i wan开发者_Go百科t that if a user click on that scroll bar and slide the slider manually and leave the scroller on 10th images then it should start it next scroll from the 10th images and then continue to scroll.

So please tell me or suggest me how can i do this?

I think it can be done by detecting a if a user clicked on scroll bar and scroll manually then i need to detect how many images passed then start the scroll again by triggering an event.

But please give me some idea in terms of code ?

-Thanks

Let's write our own tiny serial-scroll!
And ... a nice Image slider:

• Stop on mouseEnter
• Restart on mouseLeave
• During manual slide it controls the image mostly visible (more than 50% on screen!)
• Start slider again from the mostly visible image

Gallery DEMO