Sliding panel gallery - Miles DeCoster


This jQuery routine uses a set of images in unordered list items inside of a '#slideWindow' div. It scales the #slideWindow div by percentage to be responsive to window size and scales the li and img inside of the ul as well. You may add as many images as you like. The script checks to see how many there are and adjusts the width of the ul accordingly. In this example the slideWindow width is initially set to 80% of the window size. To change that, change the value of the variable slideWidth in the setup at the top of the jQuery code.

Set the speed of the slide movement with the 'speed' variable in the jQuery and the length each image shows with the 'pause' variable. Times are in milliseconds, so pause=5000 equals 5 seconds. The script will continue to cycle through all images continuously until PAUSE is clicked. When paused PREVIOUS and NEXT buttons appear. When an image is moved off the left side it is basically moved to the right end of the scrolling panel. In the script it is cloned and added to the list, then the original is removed. This allows the images to just keep cycling. The reverse is done when going "backwards" using the PREVIOUS button.

The pause/play button is just a paragraph with <p id="stop">. The text alternates between PAUSE and PLAY when clicked.

To add a slide show to your page you will need the jQuery library linked to your page, the jQuery code in this document added to any other jQuery you are using, or if none, then just copy and paste the script from this document into yours. You will also need the styles from the styles in this document. They can just be added to any existing styles you have, just check that the names/ids don't overlap.