Doing it with style
A similar gallery to the previous one but a little simpler code.
Hover the image above to show the left and right arrows and an indication of which image is being shown. Click the left/right arrows to slide to the previous/next image and the indcator will also move in that direction. When reaching the last or first image another click in the same direction will wrap to the start or end image.
The large images can also be links to other pages.
There will be an instant change of image when viewing in IE (and the arrows will always be visible in IE7 and IE8), but all other browsers will see the images slide left and right.
Firefox and IE9+ are the only browsers which support overflow:hidden when used with border-radius to crop the corners of the images.
Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.
Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.