Concept

The same as in cross-fading with more than two images. Position one photo on top of the others (by absolute/fixed position). On image change, gradually reduce the opacity from 100% to 0 of the top image. Gradually increase the next image opacity to 1.

Code

In this demo, all 5 images are positioned by absolute position inside the demo-block area on on top of the other. Only one image has opacity 1 (call it the current image). All other have opacity set to 0. When arrow is pressed, the current image opacity is set to 0, while the next image opacity is set to 1.

Images are changed in the cyclic order.

Image opacity is changed by transition defined in CSS.

FOR FULL TABLE HEIGHT IN IFRAME