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-->
</div>

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() {

  $('#slider').cycle({
    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.

Demo

Live demo