jquery scrollbar

I've been looking for a solution to my problem for开发者_StackOverflow中文版 a few days now and was wondering if anyone from the stackoverflow community can help me.

My problem is that I need a jquery carousel and a jquery scrollbar to work hand-in-hand. The carousel updates the scrollbar and vice versa but also information of what being displayed is within the scroll bar itself (for example (1/12) so it would be 1 of 12 of slides/image is displayed ). It would also be added bonus if I can get the scrollbar to snap and update the displayed information whenever it is in the process of being dragged or pulled.

I don't know where to start because I don't know if jCarousel supports the usage of jScrollpane with the same element. If someone can kindly breakdown the process of what actually needs to happen it would be great.

I'm also going to try and add a diagram in case you fully didn't understand what needs to be done.

<<--------| 5/12 |------->>

That was my effort at drawing what I'm trying to explain. As you can see the information of what carousel slide is being displayed is in the scrollbar block which is dragable. If anyone can even point me in the right direction I would be truly grateful.

UPDATE : I have started a jsfiddle so people can take a look at what im trying to explain. I'm using a combination of two plug-ins range input & scrollable made by the same people/team the docs be found can Here and the link to my jsfiddle

ANOTHER UPDATE : Edging ever closer to how i want it to run just need help smoothing out the the script

Using .animate() and .scrollLeft() :

sorry I didn't know what you wanted at first... it sounds like this is what you want. The real key is jQuery's .scrollLeft() .. The example I give also uses .animate() to make it look nicer.

jQuery

$("#next").click(function(){
    $("#cara").scrollLeft($("#cara").scrollLeft() + 100);
});
$("#prev").click(function(){
   $("#cara").scrollLeft($("#cara").scrollLeft() - 100);
});