The following is what I need:
I am currently building a website which uses the Jquery Cycle script to cycle a header with different images. In addition to this header, I need a progress bar which indicates how long each slide is remaining to be visible. When the slide slides in, the bar is filled with blue stripes, slowly changing to black 1 by 1 and when the bar is empty, the new slide slides in.
The idea is based on the following: [url removed, login to view], only in this case the bar only shows the progress of the individual slide and is fit to a particular design. Important requirements are:
-next or previous slide buttons reset the progressbar.
-when the mouse is hovering over the slide, the cycle is paused and so does the progress bar, until the mouse is no longer hovering the slide.
-If i change the transition or timeout speed of the cycle, the progress bar needs to adjust to this speed.
I've added an image to illustrate the project. Please take in account that this job needs to be done exactly as noted. If you can supply me the code, i can fit it myself using CSS.
Please let me know if you are capable of doing this. It has been done before in a way, so technically, it can be done.