Other Versions
Moving Panes Slideshow
Automatic File Loading Slideshow
Slideshow With Captions
Slideshow With Flipping Tiles
Manual Change Slideshow
Multiple Slideshows Demo
All of my JavaScript Slideshow scripts are included in the package you can download using the button below.
JavaScript Multiple
Slideshow Script
The free JavaScript code on this page demonstrates how you can use a combination of CSS positioning and opacity in your HTML to create a simple slideshow without requiring Flash or other complex software. It relies entirely on JavaScript and is compatible with most browsers. The script written to be easy to install in your own website design layouts, and uses your own images. It features multiple slideshows on a single page, optional titles or captions, optional pause and resume controls, and good style flexibility. You can download the complete script package with documentation by pressing the "Download" button on the left.
This new version of my slideshow script supports multiple slideshows on each page and offers five selectable styles of slide changing: fade transition, moving panes, flipping tiles, and two HTML-based versions: captions and fade/dissolve. The new version is HTML 5 compatible and also eliminates the need for a separate dedicated CSS stylesheet file. The script allows you to control the time between slide changes, create slideshow contol buttons, set an optional border with color control, and to set the font family, size and color of the font used for the title captions. A PHP slideshow maker script is also now included that will automatically create a slideshow from your original images.
You'll notice that I used one image (Slide 2) of a different size in the top slideshow. I did it as a negative example. Using different sized images is not recommended for real pages unless you are comfortable with changing the code yourself because it looks terrible when the browser stretches or compresses images to the specified width and height. If you use this code on your own site, be sure to resize all of your images to be the same, or use the showMaker.php script included in the .zip package which will handle the image resizing automatically. The script also does some interesting things that you can apply to your own scripts, like directly changing the stylesheet in JavaScript, like adding class definitions, which eliminates the need to have a special stylesheet added to webpages that use my slideshow script. Click on that link to see details on the techniques I used.
This page was last modified on August 27, 2020
