Rainbo Website Design Minneapolis

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




Copyright © 2005-2024 by Richard L. Trethewey - Rainbo Design Minneapolis. It's not that I think this is such an earth-shatteringly great presentation, but if you want to copy it, I'd appreciate it if you would ask for permission. I've been working with computers for over 30 years now, and one phrase keeps popping into my head - "I hate it when it's right!" And laptops and smartphones are no better.

Looking for more website design information? See my Sitemap!