Moving Panes
JavaScript Slideshow
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.
The major difference between the fading images slideshow and this one is that the slides move out of the visible area of the parent bounding <DIV> in order to reveal the next slide "underneath". During the transition, the JavaScript swaps the CSS z-index setting of the slides so that the newly-revealed slide is moved to the "top" layer and the image of the previous slide is changed to the next in sequence. The process then repeats.
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.
All of my JavaScript Slideshow scripts are included in the package you can download using the button below. My slideshow package is provided free of charge. All I ask is if you use and enjoy my software that you post the following link in an appropriate location on your site:
<a href="https://www.rainbodesign.com/pub/">Rainbo Design's Scripts & Tutorials for Webmasters</a>
This page was last modified on August 27, 2020
