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.
margin: 10px auto;
Using these simple CSS styling rules, we get a more pleasing slideshow experience.