This tutorial will show you how to create a slideshow using JQuery. The slideshow is compatible with all modern browsers, including IE, Opera and Firefox. I havent bothered making it IE6 compatible though, so if that is what you require its probably best that you look for an alternative tutorial!

The slideshow is also degradable – meaning users who have javascript disabled can still use it.

Preview:

Slideshow c

Demo the slideshow: http://weebtutorials.com/jQueryTest.html

Full code for copy/paste: http://weebtutorials.com/jQueryTestCode.html

Step 1: Getting started – Installing Jquery

First of all you will need to download the JQuery library, if you havent done so already. You can download JQuery via the following link:

http://docs.jquery.com/Downloading_jQuery#Download_jQuery

Save the file as ‘jquery.js’ or something similar into the folder in which you will be creating your HTML file.

Next you will need to download the Jquery Cycle plugin. You can do so via the following link:

http://jquery.malsup.com/cycle/download.html

Extract the contents of the zip file into the same folder used previously.

You should now have a folder containing both the ‘jquery.js’ (or whatever you chose to name it) file and the cycle plugin files.

Step 2: Download the required images

Right-click and save as to download the following images. Make sure to save them in the same folder you used for the JQuery stuff. This time save them in a sub-folder called ‘images’.

Step 3: Structure and style the slideshow using HTML / CSS.

Step 3a:

Create two DIV’s and specify an ID for each. The outer DIV will be used as a wrapper, the inner will be used to house the slideshow content.

<div id=”slideshowCont”>
<div id=”slideShow”>
</div>
</div>

Apply some styles to these DIVs:

#slideshowCont {
float:left;
width: 650px;
border:1px solid #e3e3e3;
background:url(images/slideBG.png); /*One of the images downloaded earlier*/
overflow:scroll; /*Any content which flows over the boundries of the div will be hidden, but accessible through use of a scroll bar*/
position:relative; /* Any content positioned as absolute will be positioned relative to this element*/
}

#slideShow {
padding:20px 0px; /*20 px padding to top and bottom*/
width:520px;
height:142px;
float:left;
}

Slideshow so far:

Slideshow A

Step 3b:

Now, within the ‘slideShow’ DIV you are going to add an unordered list (‘ul’). This UL will need to contain 3 list items (‘li’).

Inside each of the list items will be 3 divs – each containing an image and a caption. We will then position the list items so that only one is visible at any given time. We can then use Jquery to cycle between the list items.

Below is how our code should look now, you will need to find some of your own images to include in the slideshow. It may look intimidating, but remember it is just the same piece of code repeated 3 times. The only thing that changes is the img ‘src’, ‘alt’ and a bit of text.

<div id=”slideshowCont”>
<div id=”slideShow”>
<ul>

<li>

<div><img src=”images/cool.jpg” alt=”testimage”  width=”120″ height=”120″/>
<p> Cool image</p>
</div>

<div><img src=”images/cool2.jpg” alt=”testsimage”  width=”120″ height=”120″/>
<p> Chocolate! </p>
</div>

<div><img src=”images/cool3.jpg” alt=”testimage”  width=”120″ height=”120″/>
<p> Outdoors </p>
</div>

</li>

<li>

<div><img src=”images/time.gif” alt=”testimage”  width=”120″ height=”120″/>
<p> Time</p>
</div>

<div><img src=”images/time.gif” alt=”testimage”  width=”120″ height=”120″/>
<p> Time</p>
</div>

<div><img src=”images/time.gif” alt=”testimage”  width=”120″ height=”120″/>
<p> Time</p>
</div>

</li>

<li>

<div><img src=”images/tags.gif” alt=”testimage”  width=”120″ height=”120″/>
<p> Tags </p>
</div>

<div><img src=”images/tags.gif” alt=”testimage”  width=”120″ height=”120″/>
<p> Tags </p>
</div>

<div><img src=”images/tags.gif” alt=”testimage”  width=”120″ height=”120″/>
<p> Tags </p>
</div>

</li>

</ul>
</div>
</div>

Now we can style the list, positioning the images and text as required:

#slideShow ul{
list-style:none;
margin:0;
padding:0;
width:1900px; /*Important – Must be wide enough so that all the images can sit side by side, otherwise they will move to the next line.*/
margin-left:58px; /* Position the list as required*/
}
#slideShow ul li {
float:left;
background:url(images/slideBG.png); /* IE places a white background around the images, not sure why, but this fixes it*/
}
#slideShow ul li div{
float:left;
margin-left:26px; /* Again, just positioning images as required. This should pretty much center them out in the div*/
margin-right:24px;

}

#slideShow ul li div p{
margin:0;
padding:0;
width:120px;
background:url(images/imgFooterBG.png) repeat-x;
text-align:center;
color:#5e8387;
text-transform:uppercase;
padding:2px 0px;
font-size:12px;
}

Slideshow so far:

Slideshow b

Step 3c:

The next step is to add in the slider buttons.

Add the first in here:

<div id=”slideShow”>
<img src=”images/SlastBtn.png” alt=”next” id=”next” width=”40″/>
<ul>

And the second here:

</ul>
<img src=”images/SnextBtn.png”  alt=”last”  id=”last” width=”40″/>
</div>

It is not too important where you actualy place the buttons, as we are going to position them as ‘absolute’ which actually takes them out of the document flow. But its best to keep things somewhat logical in my opinion.

Now we can apply some styling to the buttons:

#next{
top:75px;
left:10px;
cursor:pointer; /* Change to mouse pointer when user hovers element*/
position:absolute;
display:none; /* Important – we only want to display the buttons if javascript is enabled. Hide them using the display property, we can then bring them back into view using javascript*/
}
#last{
top:75px;
right:10px;
cursor:pointer;
position:absolute;/* */
display:none;
}

Slideshow so far:

Slideshow c

The slideshow is now structured and styled. We are ready to add the slideshow functionality.

Step 3: Slideshow functionality using JQuery

The following code should be added to the head section of your HTML page.

Check the comments on each line for a brief description.

First of all create a link to the jQuery and jQuery cycle files:

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jquery.cycle.all.min.js”></script>

Then add the actual code:

<script type=”text/javascript”>
$(document).ready(function() { // This basically means, when the page is ready, or loaded, execute the following code.
$(“#slideshowCont”).css(“overflow”, “hidden”); // Change the overflow property to hidden, this removes the ugly scroll bar which is no longer needed (seeing as the user has javascript enabled)
$(“#next”).css(“display”, “block”); // Change the display property to block – bringing the image back into view.
$(“#last”).css(“display”, “block”);

});

</script>

Now to add the slideshow functionality, add the bolded parts to your code:

$(document).ready(function() {
$(“#slideshowCont”).css(“overflow”, “hidden”);
$(“#next”).css(“display”, “block”);
$(“#last”).css(“display”, “block”);
$(‘#slideShow ul’).cycle({
fx: ‘scrollLeft’, //desired animation effect, can choose from a variation of effects..fadeIn, turnLeft etc.
pause:1,
next: ‘#next’, //select the button, via ID, which should browse to the next slide
prev: ‘#last’, //select the button, via ID, which should browse to the previous slide
timeout:0
});
});


About the Author

26 Year old university student living in the UK. Currently studying Web Design & development.

7 Responses to Create a clean, simple slideshow using HTML, CSS and JQuery

  1. [...] tutorial is hosted on our old site, to view it visit the following link: http://weebtutorials.com/theBlog/?p=128 Read more from Javascript, JQuery Click here to cancel [...]

  2. [...] Create a clean, simple slideshow using HTML, CSS and JQuery [...]

  3. [...] Create a clean, simple slideshow using HTML, CSS and JQuery [...]

  4. Quintana says:

    I wanted to get the rss FEED but feed site showing me some Xml errors…

  5. Brian olsen says:

    Very nice and simple. thanks

  6. [...] I’m just looking threw my files now and I attempted to build 9 of them, and only 2 of them sort of worked in the end. The one that I build that got the worked the best was this one. [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>