jQuery Using a slider and arrow links to create custom horizontal scroll bar

Question

I have made a lot of progress on this, but there is a part I am missing and it seems like it should be simple.

I have a horizontal div and I am using something similar to this: http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div

But I also want to include arrows on the side so that the user can move the slider by clicking on those arrows. The slider would move 20% of it's total width each time it was clicked.

Everything seems to be fine when only using the slider or only using the arrows. The problem seems to be that I can't get an accurate number for the position of the slider if I start mixing and matching by dragging the slider and then switching to arrows. Since the math is wrong the slider will either not make it to the end or go too far past the containing slider div.

Does something like this exist already or is there an easier way to do this?

Thanks

Answer 1

You posted this a very long time ago, but I'd like to weigh in and suggest using a global flag to keep track of the position of the sliding element. That way, whether users are using the arrows or the scrollbar, the functions will have access to the same starting number.

Just a thought!