Simple Slideshow Using jQuery Cycle

update 2012-09-23: Demo now working

 

A simple implementation of a slideshow using jQuery Cycle Plugin with navigation.

Header Include Script

These are the required files to be placed inside the <head></head>

{code type=”html”}
<head>
<script src=”js/jquery-1.5.1.min.js” type=”text/javascript”></script>
<script src=”js/jquery.easing.1.3.js” type=”text/javascript”></script>
<script src=”js/jquery.cycle.js” type=”text/javascript”></script>
</head>
{/code}

CSS Style

{code type=”css”}
#cyclewrap{position:relative;width:545px;}
#cyclewrap .cycleprev, #cyclewrap .cyclenext{display:block;position:absolute;width:32px;height:32px;top:150px;z-index:9999;text-decoration:none;}
#cyclewrap .cycleprev{left:0;background:url(http://www.codingcereal.com/images/images/img-prev.png) no-repeat top left;}
#cyclewrap .cyclenext{right:0;background:url(http://www.codingcereal.com/images/images/img-next.png) no-repeat top left;}
#cyclewrapnav {position:absolute; bottom:0; z-index:9999;}
#cyclewrapnav a{background:transparent url(http://www.codingcereal.com/images/images/pagenav.png) no-repeat 0 0 ; float:left; height:15px; overflow:hidden; text-decoration:none; text-indent:-1234px; width:16px;}
#cyclewrapnav a.activeSlide {background-position:-32px 0;}
#cycleimages{overflow: hidden; position: relative;}
{/code}

Body Script

{code type=”html”}
<div id=”cyclewrap”>
<div id=”cycleimages”>
<img src=”images/cycle1.jpg” alt=”Cycle Image 1″ width=”545″ height=”363″ />
<img src=”images/cycle2.jpg” alt=”Cycle Image 2″ width=”545″ height=”363″ />
<img src=”images/cycle3.jpg” alt=”Cycle Image 3″ width=”545″ height=”363″ />
<img src=”images/cycle4.jpg” alt=”Cycle Image 4″ width=”545″ height=”363″ />
<img src=”images/cycle5.jpg” alt=”Cycle Image 5″ width=”545″ height=”363″ />
</div>
<a class=”cycleprev” href=”#”>&nbsp;</a>
<a class=”cyclenext” href=”#”>&nbsp;</a>
<div id=”cyclewrapnav”>&nbsp;</div>
</div>
{/code}

jQuery Script

This is to be placed before the </body> or </head> area.

{code type=”html”}
<script type=”text/javascript”>
jQuery(document).ready(function() {
if (jQuery(‘#cycleimages’).length > 0) {
jQuery(‘#cycleimages’).cycle({
fx: ‘scrollHorz’,
speed: 750,
timeout: 4000,
randomizeEffects: false,
easing: ‘easeOutCubic’,
next: ‘.cyclenext’,
prev: ‘.cycleprev’,
pager: ‘#cyclewrapnav’,
cleartypeNoBg: true
});
}
});
</script>
{/code}

How Does it Work?

The css file:
Line 1: sets the width of our slideshow.

The body script:

Line 1: <div id=”cyclewrap”> Will serve as the wrapper for our slideshow
Line 2-8: Image wrapper that holds the list of images for our slideshow
Line 9: <a href=”#”>&nbsp;</a> Will hold our previous button
Line 10: <a href=”#”>&nbsp;</a> Will hold our next button
Line 11: <div id=”cyclewrapnav”>&nbsp;</div> Will hold our pagination. The cirle images at the bottom left of the slide

The jQuery script

Line 3: Checks if our image wrapper contains images
Line 5: The slideshow effects
Line 6: Speed of transition (Note:1000 = 1 second)
Line 7: Duration of timeout for each image (Note:1000 = 1 second)
Line 10: Set .cyclenext the element as our next button
Line 11: Set .cycleprev the element as our previous button
Line 12: Set #cyclewrapnav the element that would hold our pagination

You could also refer to Options Reference page for additional settings for jQuery Cycle Plugin

Demo

See the tutorial in action

jQuery Readings and Resources

Download

Download the tutorial files

Image Credit

http://lorempixel.com/

Recommended Posts