Simple JQuery Slideshow Tutorial Using JQuery Cycle

A simple jQuery Slideshow Tutorial

Image slideshows are a popular method of displaying a larger volume of pictures in websites. Not only do they reduce the amount of page real-estate these photos would use but also if done correctly, can add a wow factor to any site. By making use of the handy Cycle plugin for jQuery, we can easily create a slideshow of our own, complete with previous and next navigation controls. Not a master of Javascript? Worry not, the Cycle plugin makes it a breeze to add slideshow functionality to your site, with only a few lines of code to get things up and running.

Maybe one day when I am old and gray I could only hope to own my dream car ... an Aston Martin, but until that dream day comes, I'll just have to settle with a looking at photos like everyone else. To make my dreaming easier, let's build a simple slideshow that automatically transitions through a small collection of Aston Martin images. We will also include Previous and Next controls to give your user the ability to scroll through at their own pace if the auto rotation does not suit them.

 

Starting the Project : Gathering Assets

Now that we know what we are trying to accomplish, the next step is to gather our assets. You can download just the image assets I used in this tutorial here if you wish to follow along yourself.

If you prefer to create them yourself you will need to create these images;

  1. A background pattern
  2. Logo or Banner Image
  3. Next and Previous Arrows with on and off states
  4. A collection of image files that you wish to Cyclize!

Cycle Image assets

 

Building your Frame : Create HTML

After we have everything we need, we can begin coding! First we create a new HTML document and set the structure of our page. Start out by create a div in the body with an ID of "slideshowContainer". This div will not only contain everything our slider needs to function, but will also be the div our next and previous arrows position is based off of.

<div id="slideshowContainer">
</div>

Next we will place in a H1, which will soon become our logo, and another div container with a class of "slideshow". Inside of the "slideshow" div we place in our image references.

<div id="slideshowContainer">
<h1>Aston Martin</h1>
<div class="slideshow">
<img src="images/image1.png" width="600" height="300" />
<img src="images/image2.png" width="600" height="300" />
<img src="images/image3.png" width="600" height="300" />
<img src="images/image4.png" width="600" height="300" />
<img src="images/image5.png" width="600" height="300" />            
</div>
</div>

And to finish it off we create the code for our next and previous buttons. Normally I like to contain menu or navigation items in lists. So in this example I have created an unordered list with 2 list item links, Next and Previous.

<div id="slideshowContainer">
<h1>Aston Martin</h1>
<div class="slideshow">
<img src="images/image1.png" width="600" height="300" />
<img src="images/image2.png" width="600" height="300" />
<img src="images/image3.png" width="600" height="300" />
<img src="images/image4.png" width="600" height="300" />
<img src="images/image5.png" width="600" height="300" />            
</div>
<ul id="nav">
<li id="prev"><a href="#">Previous</a></li>
<li id="next"><a href="#">Next</a></li>
</ul>
</div>

 

Make it Work! : Implementing JQuery Cycle

At this point we now have a frame, and your page should look like this. It doesn't look like much of a slider and it definately doesnt function like one. But lucky for us a few links and some javascript and we'll be good to go.

The jQuery library is my personal favorite, as it's pretty simple to get the hang of since it has a similar syntax to CSS. Before writing any Javascript ourselves, we'll need to reference some plugin files back in the HTML. Download the jQuery library and the Cycle plugin and upload them to the server. You'll notice in my example I link directly to the sources, this is to show you where I got them from. Normally you would always download these JS files and upload them to the same server this code will be running on. After downloading insert links to these plugins in the header of your document.

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

Now in the head we will begin with a new Javascript reference and our (document).ready function. This function tells the script to run immediately after the document is loaded.

 

<script type="text/javascript">
$(document).ready(function() {
});
</script>

 

Inside of this ready function we will place our Cycle code. The first line of our function below is telling the cycle plugin to target the object with a class of "slideshow" and apply the cycle plugin. The plugin will then collect each child item and display it as a slide. These child items don't have to be images they could be divs, list items, paragraphs, etc. In our example "slideshow" should only contain images.

 

<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
pause: 1,
prev: '#prev',
next: '#next'
});
});
</script>

 

After declaring what we are targeting we need to tell the cycle plugin what to do. Cycle has a plethora of settings which can modify both the transition effect and supporting objects for your slideshow. I won't go into detail here but if you're looking for more options than what I will be presenting check out this link to view the Cycle FAQ. For now we'll just configure it to use the fade effect transition, pause for 1 second between each slide, then tell the plugin which elements will be used for the navigation buttons.

At this point your page should look like this. Eureka! It's not pretty but it works. So let's fix that shall we?

 

Cleaning up : Add CSS

The final step of our process is to make our functioning slider look like a finalized product. Below I have added a few lines of CSS into our header to apply our background tile to the body, our logo as a background to the header 1 tag, and styled the buttons to sit left and right of our slider. The A links are also given a hover state to show the user that our arrows are clickable.

<style type="text/css">
* {
margin:0px;
padding:0px;
border:0px;
}
body {
background:url(images/background.jpg) repeat-x;
}
h1 {
text-indent:-9999px;
background: url(images/logo.png) no-repeat;
width: 340px;
height:92px;
margin: 0 auto;
}
#slideshowContainer {
width: 632px;
margin: 100px auto 0 auto;
position:relative;
}
.slideshow {
height: 332px;
}
.slideshow img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
}
#nav {
list-style-type:none;
z-index:150;
}
#nav li a {
display:block;
width:58px;
height:102px;
text-indent:-9999px;
outline:none;
}
#prev a {
background:url(images/left.png);
width:58px;
height:102px;
position:absolute;
top:220px;
left:-70px;
}
#next a {
background:url(images/right.png);
width:58px;
height:102px;
position:absolute;
top:220px;
right:-70px;
}
#next a:hover {
background:url(images/right_over.png);
}
#prev a:hover {
background:url(images/left_over.png);
}
</style>

Now we should be all wrapped up and your page should look like this. Fantastic! Aston Martin would be proud ... At least I hope so.

 

Final Conclusions

As you can see this technique is simple and rather effective for showing off your prized images. Feel free to download the source of this tutorial below and take a second to let me know what you think of this tutorial.