Implementing a JavaScript Slider

These instructions will show you how to add a JavaScript slider to your pages.

JavaScript Slider Demo

Getting the JavaScript Files

In order for this slider to work, you will need a copy of JQuery and a copy of the slider JavaScript code. You can download them both here (Options + Click to download the files):

Use the script tag to add the JavaScript to the html documents.

You must include these tags for each HTML page you want to use the slider in.
The script tags should go between you <head> tags
Make sure to update the src attribute to the correct path

<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/slideshow.js" type="text/javascript" charset="utf-8"></script>

Creating the HTML

The basic structure you should use for your HTML is a series of div tags.

<div id="gallery">
	
  <div class="slides">
    <div class="slide"><img src="" alt="" width="" height="" /></div>
  </div>

</div>

Here's breakdown:

The entire gallery should be enclosed in a div tag with an id of 'gallery'
All of the images should be enclosed by a div with an id of 'slides'
Each image tag should be enclosed by a div with an id of 'slide'
You must specify the width and height of your images as html attributes in the img tag. This is how the JavaScript knows how far to "slide"

The menu code

If you would like to buttons to move the slides forward and backward, add this HTML immediately below the gallery div:

<div id="menu">
  <a href="#previous" class="previous">previous</a> 
  <a href="#next" class="next">next</a>
</div>

Adding the CSS

The following CSS styles must be used for the slider to work:

/* Styles for the Slides */
/* In order to make the slide show work, you only need to include these styles */

#gallery {
  overflow: hidden;	/* This makes sure that the extra photos are hidden */
  width: 960px;		/* This should be set to the width of your 
			    gallery ( the part that you actually want viewable) 
			    Make sure to change this value to the width you want visible */
}
.slide 
  float: left; 		/* This makes sure that all our images display in a row */
}

Styling the Menu code

View the style sheet for slider demo page to see how to style the menu buttons. The CSS code is well-commented. Make sure to use a different image for the actual buttons.

Adjusting the Slider Options

The following changes are optional. You must open and edit the slideshow.js file to make these changes.

Adjust slide speed

You can adjust how slow or fast each slide moves.

Turn off automatic sliding

The slider moves automatically every 5 seconds. You can turn off this behavior.

Change the speed of automatic sliding

You can change how quickly each slide auto scrolls.

Turn off random image on page load

When the page loads, the slider is set to jump to a random image in the slideshow. You can turn this off.

To change these options, find the following code at the top of the slideshow.js file:

/*** Slideshow Options ****/

/* Sliding Speed 
 * Changes the rate at which the images slide. Bigger number means slower
 */
var slideSpeed=600;

/* Automatic Sliding
 * Sets whether or not the slides scroll automatically. Set to false to turn off.
 */
var autoSlide=true;

/* Automatic Sliding Timer
 * Sets how much time between each automatic slide.  Number is miliseconds (5000 = 5 secs).
 */
var autoSlideTimer = 5000;

/* Random Image
 * Sets whether or not a random image will be chosen when the page loads. If false, the first image will show.
 */
var loadRandom = true;

Change only the highlighted sections of code.