Line25

Build a Simple Image Slideshow with jQuery Cycle

Read the full post

Image slideshows are a popular method of displaying numerous sequential photographs in web design. 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? Don’t worry, the Cycle plugin makes it a breeze to add slideshow functionality to your site, with only a few lines of code required to get things up and running.

It’s my goal to one day own a Harley Davidson Sportster, but until that dream day comes, I’ll have to settle with drooling over a bunch of photos. To make my dreaming easier, let’s build a simple slideshow that automatically fades through a small collection of Sportster shots. Previous and next controls would also be handy, to give me the control to navigate between shots are my own pace. Here’s the final slideshow we’ll be building in the following steps.

Harley Davidson Sportster slideshow

View the demo

The PSD concept

Create a new Photoshop document and fill the background with a rough and grungey texture. This one I’m using is from the great collection from the Circlebox Blog. Place in a copy of the Harley Davidson logo and change the blending mode to Multiply to allow the graphic to interact with the texture.

Use a series of tape brushes to create a rough border to house the photography. Paint the brush mark, then use a Layer Mask to thin the border down. Draw a path around any excess and delete.

Draw a rectangle and fill with a temporary colour. Move this into place to simulate where the photography will sit in relation to the overall design.

Switch over to Adobe Illustrator to quickly draw a navigation arrow. Begin with a square and rotate it by 45 degrees, then delete out one of the side points. Add a thick stroke to the shape, selecting the round cap and corner options.

Draw a black circle back in Photoshop, then paste the arrow from Illustrator. CMD-Click the arrow layer’s thumbnail to load the selection, then delete this selection from the circle background. Reduce the opacity of the button to 50% to allow the underlying photos to show through.

Next, find a bunch of shots to fill the slides of your slideshow. Open them up in Photoshop and crop them to size according to the slideshow dimensions. Use the temporary shape to load the required selection.

Begin exporting all the image files from the concept. Elements such as the logo, border and buttons can make use of the PNG-24 transparency option.

The final image collection consists of the background texture, the slideshow border, Harley logo, navigation buttons and five image slides.

The HTML structure

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Harley Davidson Slideshow</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>

<div id="container">

</div>

</body>
</html>

Create a new HTML document in your coding application of choice. We’ll need the usual framework of Doctype, referenced CSS file and a container div to get things started.

<h1>Harley Davidson Motor Cycles</h1>
	<div id="slideshow">
		<ul id="nav">
			<li id="prev"><a href="#">Previous</a></li>
			<li id="next"><a href="#">Next</a></li>
		</ul>
	
		<ul id="slides">
			<li><img src="images/slide1.jpg" alt="Harley Davidson Sportster" /></li>
			<li><img src="images/slide2.jpg" alt="Harley Davidson Sportster" /></li>
			<li><img src="images/slide3.jpg" alt="Harley Davidson Sportster" /></li>
			<li><img src="images/slide4.jpg" alt="Harley Davidson Sportster" /></li>
			<li><img src="images/slide5.jpg" alt="Harley Davidson Sportster" /></li>
		</ul>
	</div>

Next, the main HTML markup for the slideshow can be written out. First up, the logo would fit well as a header 1, seeing as there’s no other title on the page. Then the slideshow elements are contained in a <div> with a unique ID of slideshow. Unordered lists are used to mark up the two navigation buttons, and each image slide. Each <ul> is also given a unique ID to allow easy targeting with Javascript later.

Style the CSS

body, h1, ul, li {
	margin: 0; padding: 0; border: 0;
}

body {
	background: #e8dbcb url(images/bg-texture.jpg);
}

#container {
	width: 1095px; margin: -40px auto;
	position: relative;
}

h1 {
	width: 262px; height: 226px; margin: 0 auto; position: relative; top: 100px;
	background: url(images/harley-logo.png); text-indent: -9999px; z-index: 10;
}

With the HTML structure in place, we can now add some visual styling with CSS. Begin with some general formatting such as a browser reset, then we can add the background texture to the body and centralise the container div. Because we’ll be using relative positioning and z-index on the child elements, the container will also need declaring as position: relative;. Image replacement methods on the <h1> can soon transform it into the Harley Davidson logo. The <h1> is also positioned relatively to allow it to overlap the images. To ensure it stays on top, it’s given a z-index value of 10 (values 5 and 15 used later).

div#slideshow {
	width: 1083px; height: 518px; padding: 15px 0 0 12px;
	background: url(images/border.png);
	overflow: scroll; /* Allows the slides to be viewed using scrollbar if Javascript isn't available */ 
	position: relative; z-index: 5;
}

We can now add the bulk of our CSS styling to the slideshow <div> and its child <ul>'s. The slideshow <div> itself is given the exact dimensions of the border graphic, minus any padding used to move the photos into place. It’s then given the border graphic as a background image.

If the user doesn’t have Javascript enabled, the long list of image slides could easily break the layout of any website design, so adding overflow: scroll; will generate scrollbars on the slideshow <div>. These won’t be pretty, but it will maintain usability and accessibility.

div#slideshow ul#nav {
	display: none;
	list-style: none;
	position: relative; top: 210px; z-index: 15;
}
	div#slideshow ul#nav li#prev {
		float: left; margin: 0 0 0 40px;
	}
	div#slideshow ul#nav li#next {
		float: right; margin: 0 50px 0 0;
	}
	div#slideshow ul#nav li a {
		display: block; width: 80px; height: 80px; text-indent: -9999px;
	}
		div#slideshow ul#nav li#prev a {
			background: url(images/prev.png);
		}
		div#slideshow ul#nav li#next a {
			background: url(images/next.png);
		}

	div#slideshow ul#slides {
		list-style: none;
	}
		div#slideshow ul#slides li {
			margin: 0 0 20px 0;
		}

The ul#nav is moved into place with relative positioning, and is given the highest z-index value to ensure it’s always on top.

Both the previous and next buttons are then moved into place and either floated to the left or right, and the child anchors are converted to buttons with the image replacement technique.

Once the ul#nav and its <li's> are styled up, it’s hidden from view using display: none;. Our jQuery will fade these into view later, unless the user has Javascript disabled, in which case the navigation buttons are not needed at all.

Finish off with jQuery

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

Once the basic structure and styling are in place, we can begin adding extra functionality and effects with Javascript. The jQuery library is my personal favourite, as it’s pretty simple to get the hang of with it having a similar syntax to CSS. Before writing any Javascript ourselves, we’ll need to reference some files back in the HTML. Download the jQuery library and the Cycle plugin, then create a blank Javascripts file named scripts.js, where we’ll add a few lines of our own code.

$(document).ready(function() {

});

In the scripts.js file, write out the basic code to activate jQuery. This basically says once the document is loaded, do whatever follows.

$("#slideshow").css("overflow", "hidden");

Before getting to the slideshow functionality, we need to take care of some CSS. Remember the slideshow div that was set to overflow: scroll;? This needs setting to overflow: hidden; for users with Javascript enabled, so they don’t see the ugly scrollbars.

$("ul#slides").cycle({
	fx: 'fade',
	pause: 1,
	prev: '#prev',
	next: '#next'
});

The syntax for activating the Cycle plugin is as simple as can be, just add .cycle() to whichever element you like. In our case it’s ul#slides. There’s a large range of options and parameters that can be set, but we’ll just configure it to use the fade transition, pause between each slide, then tell the plugin which elements will be used for the navigation buttons.

$("#slideshow").hover(function() {
	$("ul#nav").fadeIn();
	},
		function() {
	$("ul#nav").fadeOut();
	});

Finally, the navigation buttons can be given one extra fancy touch by configuring them to fade in and out whenever the user mouses over the slideshow area. This allows them to become visible when needed, but not distract away from the gorgeous Harley Sportsters! These few lines of jQuery simply say, when the slideshow div is hovered on and off by the user’s mouse, fade in and out the ul with ID of nav.

In summary

Get all that? When everything is combined together, there’s not much to it at all. Here’s the complete HTML, CSS and Javascript codes for reference.

Complete HTML code

Complete CSS code

Complete Javascript code

Harley Davidson Sportster slideshow

View the demo

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

68 Comments

  1. Jens Kelch says:

    Thanks!
    I like your "In Summary" it´s very helpful. Great Job!

    Greetings from Germany

  2. Alex Flueras says:

    Great tutorial, thanks for sharing.

  3. Chunk says:

    In annotated code in the summary is really helpful. Helps me understand the code a lot more easily.
    Cheers!

  4. Lam Nguyen says:

    Great tutorial!

  5. Very nice and simple tutorial Chris

  6. That is a very simple tutorial. I have been looking to improve my jQuery skills – especially when it comes to creating slideshows like this!

  7. Simple and clear tutorial, thanks for sharing Chris. Seeing these slideshows more and more, also get more requests to have them included in projects.

  8. Carl says:

    Thanks, great tutorial.

    You simplified that amazingly =)

  9. beebig says:

    this is just great!! 10x a lot for this. i will use it my next project, for this is the perfect slideshow i was looking for.

    thank you!!

  10. Cool article. Very useful and clear! Thanks a lot.

  11. Oscar Lemström says:

    Thanks a lot! This is exactly what I was looking for my portfolio! And you even explained jquery instead of just saying "copy & paste this". ;)

  12. Great tutorial. Hope you get the Harley one day! Thanks Ted.

  13. squareart says:

    Thanks Chris, great tut…just when I was about to look for this: )

    Aso like the in summary feature. Great!

  14. stellacyan says:

    wow lovely! thanks!

  15. guirigales says:

    As promised….many thanks. Youll make a web designer of me yet!

  16. David says:

    The Cycle plugin is great. Very easy to use. I like the prev/next buttons.

  17. Butch Page says:

    Great tutorial. Really helpful how you show the Photoshop side of creating the slider. The summary at the end is really helpful.

  18. Jhon Doe says:

    Great tutorial

  19. Surely this is how all online tutorials should be.

    I actually feel like I could complete this one and get it to work.

    Wow! Thanks for the time it must have taken to write this up for us.

    Jonathan.

  20. Meghan G. says:

    That's exactly what I needed! Thanks so much :-)

    Now I can finally replace this lame thing I've done for my header slideshow with some really nice looking and reliable code.

    Cheers!

  21. Thanks for the kind comments everyone, glad to hear you're finding it useful.

  22. Cook says:

    awesome tutorial…thnx for sharing

  23. Mary Clark says:

    Excellent….thanks of lots..

  24. Man, who DOESN'T love jquery?

  25. Jason says:

    What a great tutorial. Not only have you addressed a feature that a lot of content authors want to implement, but you have done so in true step-by-step fashion – it is rare to see the process from PSD to finished product…we usually only get a piece of the puzzle.

  26. CyberCat says:

    Great! Thanks for tutorial.

  27. Very detailed tutorial, thanks!

  28. Chris, Thanks a lot for the very simple and greatly commented tutorial.
    Every tutorial you make contributes to the web design community a lot!
    Keep up the great work man!

    Cheers,
    Sagi

  29. Thanks a lot Chris!
    Every tutorial you make, as simple as it maybe, is a great contribution to web designers all over the world.

    Keep up the great work!

    Cheers,
    Sagi

  30. What a great tutorial – I'll have to give it a go!

    If you decided that you wanted content beyond images on each slide, is it possible to embed links? Or is it a pure image gallery only?

  31. Mark says:

    Great tutorial, thanks Chris. Perfect for a jQuery beginner!

  32. R says:

    Great stuff! And perfect timing. I think I will implement this on a site I'm working on…

  33. Beben says:

    so simple but still difficult for me…hihihi :D
    thanks for tutorial…

  34. VAiN says:

    Thanks for the In Summary!! it really helps! Your stuff rocks!

  35. Louisa says:

    The summary 'details' are brilliant! Thanks Chris!

  36. Louisa says:

    Thanks Chris!! Nice & easy to understand!

  37. SirG says:

    Fantastic – Thanks!!

    I like this version (with the fade between images) because it negates the need to get clever with the beginning image.

    Very nice!

  38. bigjobsboard says:

    Thanks for the tutorial! This is so great! I like the Harley Davidson. Good example. LOL

  39. It's great to hear that these kind of 'step-by'step' mini projects are proving popular. I'll be sure to think up some more ideas for future posts.

  40. DanielN says:

    Great! Bookmarked!

  41. Sjoerd says:

    Hey, great turorial, its helping me a lot building my school-portfolio.

    I just cant seem to make the slide go slower… In my case there is a small text below the picture and i want the people to get the time for reading it.

    Cant be difficult, i just cant figure it out :(.

    Any help would be awesome!

    • Christopher Forrest says:

      Hi Sjored,

      I think you could try the following speed and timeout commands in your scripts.js file:

      $("ul#slides").cycle({
      fx: 'fade',
      pause: 1,
      prev: '#prev',
      next: '#next',

      speed: 300,
      timeout: 4000

      });

      hope this helps

      • Sjoerd says:

        Doesn't work for me :(

        I'll just keep it default, when you hover your mouse the image stays, that should be enough.

        thanks for your response anyway!

        Sjoerd

  42. Alan says:

    Another great tutorial Chris,

    I actually done something very similar for a client the other day, but mine didn't have buttons for next and previous.

    Bookmarked this for future use.

  43. Hi Chris,

    That is a really nice tutorial. Plain and easy to understand. Perfect for the beginner and those wanting a refresher.

    C'mon though. The sportster is no forrester! ;)

  44. Christopher Forrest says:

    Hi Chris,

    Great tutorial for the jQuery beginner.

    I think that the slider is great, although I have been having a slight problem with the demo in ie as it makes the image drop on mouse over, do you know of a fix for this?

    Many thanks

  45. jon says:

    Great slideshow..
    I'm always in need of captions, though.

  46. Wonderful!!! I've been wanting to know how to do this for a while.

  47. Matt says:

    Hi, this is how all tuorials should be done!

    I have noticed the same problem as the poster above (Christopher Apr.22 2:35pm) in that in IE, the slideshow moves downward on hover and returns to its original position on mouse out..

    I'll continue to look for a fix, but if anybody has any ideas it would be a great help!

    Thanks

  48. Matt says:

    @Christopher above

    I've fixed the IE moving image problem by applying 'position: absolute' to the ul#nav then giving it a width (the width of the slideshow) to position the next/prev buttons correctly..

    Hope it helps

    • Jesse says:

      thank you for this fix! I am so glad there are informative and helpful people on a lot of these design blogs…helping us all move forward!

  49. kalamaras says:

    very good tutorial and great work…!

  50. Jesse says:

    Chris – you just made my project possible. Thanks for the great tut! Loving the simplicity…cheers

  51. Michael says:

    Thanks for this great tutorial Chris, it was really helpful for me because I am learning the whole jQuery and JavaScript things.

    Bye

  52. Samed says:

    Wow, this is a great tutorial. I've followed and have everything working perfectly! Seems to have problems in IE though, anyone have a fix?

  53. Codeforest says:

    Chris, I just love the way you think and work. Great stuff and excellent article.

  54. Agon says:

    Great Chris like your tutorials, hope to c more from you about jQuery…

  55. Great write up. I think jquery cycle is the best slideshow plugin i've used. it's so easy to implement and easy to expand upon.

  56. Margaret says:

    This was a perfect solution for me and worked out great, except I get a little blue, dotted line, bounding box around the next/back arrows when they are clicked. Any ideas how to fix this?

  57. Cameron D says:

    Hey Chirs, awesome tutorial. Can't wait to use it in my project! I was wondering how hard would it be to add the little circles at the bottom of the pic to let us know how many images there are and what image it's currently on?

  58. Dan Denney says:

    I love it when great designers do coding tutorials.

    This is a gorgeous implementation that makes me want to give it a run right now.

  59. p3p3lon says:

    hi there!

    This tutorial is just what i needed to learn.

    I just finished it but i can´t make the fade in and out work. Any idea of what could be grong?

    Thanks!

Comments are now closed