For the moving panes slideshow, we need to make the size of the images identical so that the "bottom" slide doesn't show through if the "top" slide is smaller. I recommend that you use the PHP Slideshow Maker tool showMaker.php to create the slides for this type of slideshow. That tool is included in the package you can download using the button at the bottom of this page.
And since we're discussing CSS here, you'll note that no <table>s are used to display the slideshow here. The slideshow is contained in a floated <DIV> here, but you can insert a slideshow anywhere in your web page design that's convenient, and you can have multiple slideshows on a page, each with their own slides, custom appearance, and a choice of transition methods - fading/dissolving images or moving slides.
The moving panes slideshow alternates between moving the slide offscreen horizontally and then vertically. With a little ambition, you could modify this code so that the slides scroll right and down as well as left and up as they do now. You could even make them move both vertically and horizontally at the same time to shake things up a bit. It's up to you.
<a href="http://www.rainbodesign.com/pub/">Rainbo Design's Scripts & Tutorials for Webmasters</a>
This page was last modified on February 19, 2014