create image slider that shows part of previous and next image

Question

I'm trying to create a slideshow using jQuery (similar to jquery scrollhorz ) but I want the previous and next image partly shown.

Right now, what I have, is a div (with overflow hidden) containing all the images I have. When previous or next button is pressed, I animate the whole div either to left or right. The problem is, if I have many images loaded into the div, it becomes laggy and slow.

What is the best design to implement this image slider?

Answer 1

Without going into the code required, my suggestion would be to use jquery (or moo if that's your thing) to maintain a div that is three to five images long, and keep a list of urls to all the images you want displayed. When you slide the images left or right, you'll pop off the image on the opposite end and add the appropriate image to the other side.

You could use the same technique to loop through the list seamlessly.

Answer 2

Try this.

Hero carousel

It fits your description....Hope it helps out :)

this might be a solution too. http://jsfiddle.net/JCQ6Q/15/
Vote up if it helps you :) all the best