Centering Slideshows with jQuery Cycle Plugin

The jQuery Cycle plugin is a JavaScript plugin that will help you make beautiful slideshows. There are a ton of options for the Cycle plugin to help you make really nice-looking and functional slideshows.

This example will show the steps to take for centering slides in a slideshow using the Cycle plugin. HTML markup in this case is a group of images inside a <div> container. CSS is used to give some style to our slideshow and for centering everything. JavaScript is used to control the transitions of the slides and the animation of the slideshow.

HTML Markup:

A basic slideshow might have a few images that are cycled through in sequential fashion with random special effects that bring each photo into view. The JavaScript code that could be used with the jQuery Cycle plugin for such a slideshow could be as follows:

JavaScript:

jQuery(document).ready(function($) {
 $('#showy').cycle({
  fx: 'all',
  speed: 800,
  pause: 2000,
  slideExpr: 'img'
 });
});

So far, we’d get a mess if no CSS rules targeted the slideshow.

Without at least giving dimensions to the slideshow, via width and height properties, the Cycle plugin will be helpless to show the images correctly. Make sure to add width and height values to the slideshow container in the CSS rules.

Also, you’ll need to specify the position property. In this case we’re giving a value of ‘relative’ instead of ‘absolute’ for the position property as we want to center the slideshow instead of placing it at some exact location. Without specifying the position of the slideshow container, some of the transition effects won’t be seen as intended.

The trick to centering the slideshow is to set the margins. Give the right and left margins a string value of ‘auto’ to center things horizontally. The top and bottom margins are given a numerical value, 10 px in this case.

CSS:

#showy {
position:relative;
height:300px;
width: 300px;
margin: 10px auto;
}

Using these simple CSS styling rules, we get a more pleasing slideshow experience.