Centered Slides

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="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://malsup.github.io/jquery.cycle2.js"></script>
<script src="https://malsup.github.io/jquery.cycle2.center.js"></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" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=2000
    data-cycle-center-horz=true
    data-cycle-center-vert=true
    >
    <img src="https://malsup.github.io/images/beach1.jpg" width=200 height=200>
    <img src="https://malsup.github.io/images/beach2.jpg" width=100 height=100>
    <img src="https://malsup.github.io/images/p1.jpg"     width=200 height=150>
    <img src="https://malsup.github.io/images/beach4.jpg" width=125 height=125>
    <img src="https://malsup.github.io/images/p2.jpg"     width=300 height=225>
</div>

The example below shows the slideshow container in yellow.