Infinitly looping image sequence inside a fixed div that changes on scroll

I would someone to create some javascript/css/html code for me.

What I would like:

- A single frame of an image in the middle of the page

- The image is one of a series of different animation frames

- When the user clicks and drags inside the image, scrolls left or right over the image with the touchpad, swipes left or right over the image on touchscreen or uses the mouse scrool wheel over the image the image switches to the next in the series. The scroll needs to go from left to right, not up and down.

- ! Important ! - The image shoud switch to the next image frame immediately, not slide or scroll to the next image. The look should be more like an animation.

- I would like the ability to change how fast the animation frames change, so swiping might move just 1 frame, or will animate through 5 or 6 frames.

- I would like the ability to add or remove momentum or inertia, so if the user swipes quickly it will scroll through a few frames before slowing down again.

- The frames need to loop, so that once the user has scrolled to the left image it seamlessly starts at the begining again.

- Needs to work on mobile and desktop

THIS IS VERY CLOSE TO WHAT I WANT ---- [login to view URL]

BUT IT IS NOT CORRECT BECAUSE:

1) scroll left to right, not up and down

2) it needs to scroll in a LOOP, not get to the end of the sequence. It needs to be an infinite loop.

3) The image should be portrait, in the middle of the screen

I have attached an zip of images that I would like you to use.

Please breifly outline to me how you would implement the code to do this. I will not be accepting bids that do not breifly describe how they will work out how to solve the problems I have mentioned.

Thank you

JavaScript CSS HTML5 HTML jQuery / Prototype

Project ID: #31899518

About the project