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.

  • http://www.j-kelch.de Jens Kelch

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

    Greetings from Germany

  • http://www.studioweber.com Alex Flueras

    Great tutorial, thanks for sharing.

  • Chunk

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

  • http://aext.net Lam Nguyen

    Great tutorial!

  • http://www.smashingshare.com Smashing Share

    Very nice and simple tutorial Chris

  • http://www.ingledow.co.uk/ David Ingledow

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

  • http://www.thomascraigconsulting.com Thomas Craig Consulting

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

  • Carl

    Thanks, great tutorial.

    You simplified that amazingly =)

  • http://www.beebig.ro beebig

    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!!

  • http://www.manakor.org Nikita Sumeiko

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

  • Oscar Lemström

    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". ;)

  • http://www.goblinridge.co.uk Yorkshire Web Design

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

  • http://squareart.co.za/lab squareart

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

    Aso like the in summary feature. Great!

  • http://stellacyan.com/ stellacyan

    wow lovely! thanks!

  • guirigales

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

  • http://projectdw.com/ David

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

  • Butch Page

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

  • http://www.jhondoe.info Jhon Doe

    Great tutorial

  • http://www.fabulousphotogifts.co.uk Fabulous Photo Gifts

    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.

  • Meghan G.

    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!

  • http://twitter.com/chrisspooner Chris Spooner

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

  • http://www.modny73.com/ Cook

    awesome tutorial…thnx for sharing

  • http://www.nethzah.com/ Mary Clark

    Excellent….thanks of lots..

  • http://www.arvinbautista.com Arvin Bautista

    Man, who DOESN'T love jquery?

  • http://www.wanderingcreative.com Jason

    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.

  • http://www.webstrana.com/blog/ CyberCat

    Great! Thanks for tutorial.

  • http://www.jordanwalker.net Jordan Walker

    Very detailed tutorial, thanks!

  • http://blog.sagi-design.co.il Sagi Shrieber

    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

  • http://blog.sagi-design.co.il Sagi Shrieber

    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

  • http://www.rochelledancel.com Rochelle Dancel

    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?

    • http://twitter.com/chrisspooner Chris Spooner

      The great thing about the Cycle plugin, is that it cycles through whatever list of elements you ask it to. I've used it for displaying testimonial quotes on other projects.

      • http://www.rochelledancel.com Rochelle Dancel

        That's great – thank you so much!

  • http://www.mjcreations.co.uk Mark

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

  • http://robertfrusso.com R

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

  • http://beben-koben.blogspot.com Beben

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

  • VAiN

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

  • http://www.lalu.com.au/ Louisa

    The summary 'details' are brilliant! Thanks Chris!

  • http://www.lalu.com.au/ Louisa

    Thanks Chris!! Nice & easy to understand!

    • http://www.lalu.com.au/ Louisa

      Sorry for the double comment! I didn't think my first comment went through! Bit embarrassing!

      • http://twitter.com/chrisspooner Chris Spooner

        Don't worry Louisa, I'm currently testing out various configurations to try and make the cache plugin and comments play well together!

  • SirG

    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!

  • http://www.advancedwebads.com/partner/banneradman bigjobsboard

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

  • http://twitter.com/chrisspooner Chris Spooner

    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.

  • DanielN

    Great! Bookmarked!

  • Sjoerd

    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

      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

        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

  • http://www.alan-horne.com Alan

    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.

  • http://www.markos.co.nz Mark Shingleton

    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! ;)

  • Christopher Forrest

    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

  • jon

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

  • http://www.nymcnj.org Jose Gonzalez

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

  • Matt

    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

  • Matt

    @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

      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!

  • http://www.xariskalamaras.gr kalamaras

    very good tutorial and great work…!

  • Jesse

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

  • http://www.emdesigns.de Michael

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

    Bye

  • Samed

    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?

  • http://www.codeforest.net Codeforest

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

  • Agon

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

  • http://www.brettjankord.com Brett Jankord

    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.

  • Margaret

    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?

  • http://www.dutchbridge.nl matthijs

    good tutorial!

  • Cameron D

    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?

  • http://dandenney.com Dan Denney

    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.

  • p3p3lon

    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!

  • p3p3lon

    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!