jQuery html slideshow

I enjoyed building my image slideshow so much that I had to do another. I have used many open sourced html slideshows in my years, but again I wanted to build one that is very simple and customizable. The html slideshow I have created will fade in and out through any html content of your choice. Here are the steps to create this slideshow.

1: Link your JS.

Three files will need to be linked in your on your page, the jQuery library, the preloader JS(optional) and my slideshow JS.




Sources:

jQuery
preloader
mariosSlide.js

2: Set up your HTML.

Start with a division and give it any id that you would like, just keep in mind you will need to define this name later in the JS.

Inside of this div will be your containers holding your content, each container will need to have a id starting with id=”slide1″, the next id=”slide2″ etc. You will also set each style of these elemts to display:none, you can either do it inline or in your CSS file.


  

3. Edit mariosSlide.js

There are a few variables to set, alter the code as needed save then you should be ready to rock.


var divName = "slideShowDiv";
var numSlides = 3;
var pauseTime = 6000;
var imagePreLoad = true;
var imagesPath = "http://marioedgar.com/homepage_slide_images/";
var imageType = ".jpg";
var slideShowWidth = 910;
var slideShowHeight = 300;
var loaderName = "loader.gif";
var loaderWidth = 32;    
var loaderHeight = 32;
var navigationButtons = true;

Click here to download source files.

A working example of this is on my homepage, check it out here.

© 2010 M2Volt all rights reseved

back to top