jQuery: shuffled content slider

We can create a jQuery content slider with a shuffle effect using the Cycle plugin. The incredible thing of this content slider is that Cycle handles everything with a single declaration, confirming this plugin as one of the most versatile in the jQuery world. First, our basic markup:

<div id="slider">
 <div class="slide">...</div>
 <!--more slides-->

A couple of CSS styles, though they're not required by Cycle:

#slider {
 width: 400px;
 height: 300px;
 position: relative;
 overflow: hidden;
 margin: 0 auto;

div.slide {
 font-size: 1.2em;
 background: #a40;
 color: #fff;
 width: 400px;
 height: 300px;

Finally, Cycle itself:

$(function() {

    fx: 'shuffle'


There are several other Cycle effects that you can add to your slideshows which are listed here. You can see the demo below.


Live demo

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

One thought on “jQuery: shuffled content slider”

Leave a Reply

Note: Only a member of this blog may post a comment.