Cycle2's center plugin must be included in order center slides as shown in the example below. See the Download page for a link to download the center plugin.

This page demonstates how Cycle2's center plugin can center slides horizontally and vertically. The center plugin is an add-on that is not included in the jquery.cycle2.js script. It must be included separately:

<script src=""></script>
<script src="/jquery.cycle2.js"></script>
<script src="/"></script>

The center plugin provides the options data-cycle-center-horz and data-cycle-center-vert, both of which accept booleans and default to false. Set one or both options to true to enable auto-centering of your slides.

.slideshow { width: 80%; height: 300px; margin: auto; border: 1px solid #bbb; background: #ffc }
.slideshow img { opacity: 0; filter:alpha(opacity=0); }


<div class="slideshow" 
    <img src="/images/beach1.jpg" width=200 height=200>
    <img src="/images/beach2.jpg" width=100 height=100>
    <img src="/images/p1.jpg"     width=200 height=150>
    <img src="/images/beach4.jpg" width=125 height=125>
    <img src="/images/p2.jpg"     width=300 height=225>

The example below shows the slideshow container in yellow.