Shuffle

The shuffle effect is achieved by assignin the fx option to shuffle.

Simple

<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.shuffle.js"></script>

...

<div class="cycle-slideshow" 
    data-cycle-fx=shuffle
    data-cycle-timeout=2000
    >
    <img src="https://malsup.github.io/images/p1.jpg">
    <img src="https://malsup.github.io/images/p2.jpg">
    <img src="https://malsup.github.io/images/p3.jpg">
    <img src="https://malsup.github.io/images/p4.jpg">
</div>

Easing

Declaring Easing methods on the animation helps create some interesting effects with shuffle. Cycle2 supports the Easing Plugin for any transition effect. The data-cycle-easing attribute can be used to specify the easing method for both the incoming and outgoing slide. Or for finer control, data-cycle-ease-in and data-cycle-ease-out can be used to control the slides individually.

<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.shuffle.js"></script>
<script src="jquery.easing.1.3.js"></script>

...

<div class="cycle-slideshow" 
    data-cycle-fx=shuffle
    data-cycle-speed=1500
    data-cycle-easing=easeInOutBack
    data-cycle-ease-out=easeOutBack
    data-cycle-timeout=2000
    >
    <img src="https://malsup.github.io/images/p1.jpg">
    <img src="https://malsup.github.io/images/p2.jpg">
    <img src="https://malsup.github.io/images/p3.jpg">
    <img src="https://malsup.github.io/images/p4.jpg">
</div>

Displacement

The displacement of the shuffle effect can be controlled by the data-cycle-shuffle-left, data-cycle-shuffle-right, and data-cycle-shuffle-top attributes. data-cycle-shuffle-left and data-cycle-shuffle-right are mutually exclusive and define the number of pixels to the left or right of the container to move the slide. The default is to move the slide to the left edge of the container, which is equivalent to data-cycle-shuffle-left=0.

The data-cycle-shuffle-top attribute defines the number of pixels to shuffle in the vertical direction. A positive number indicates shuffling the slide downward and a negative number indicates shuffling upward. The default value for data-cycle-shuffle-top is 15.

<div class="cycle-slideshow" 
    data-cycle-fx=shuffle
    data-cycle-shuffle-right=0
    data-cycle-shuffle-top="-75"
    data-cycle-speed=1000
    data-cycle-timeout=2000
    >
    <img src="https://malsup.github.io/images/p1.jpg">
    <img src="https://malsup.github.io/images/p2.jpg">
    <img src="https://malsup.github.io/images/p3.jpg">
    <img src="https://malsup.github.io/images/p4.jpg">
</div>

Reverse

Using the rerverse option cause the shuffle effect to reverse.

<div class="cycle-slideshow" 
    data-cycle-fx=shuffle
    data-cycle-timeout=2000
    data-cycle-reverse=true
    >
    <img src="https://malsup.github.io/images/p1.jpg">
    <img src="https://malsup.github.io/images/p2.jpg">
    <img src="https://malsup.github.io/images/p3.jpg">
    <img src="https://malsup.github.io/images/p4.jpg">
</div>

Offset Stack

An offset stack effect can be achieved by using the data-cycle-slide-css attribute. This attribute accepts a JSON object which defines the css properties for the slide position when it is at rest. As with any JSON string being parsed by jQuery, your JSON must be well-formed.

It is also necessary to set the data-cycle-hide-non-active attribute to false so that cycle does not hide the inactive slides.

<div class="cycle-slideshow" 
    data-cycle-fx=shuffle
    data-cycle-timeout=3000
    data-cycle-shuffle-top="25"
    data-cycle-shuffle-left="-20"
    data-cycle-reverse=true
    data-cycle-hide-non-active=false
    >
    <img src="https://malsup.github.io/images/p1.jpg" data-cycle-slide-css='{ "top": "-10px",  "left": "10px" }'>
    <img src="https://malsup.github.io/images/p2.jpg" data-cycle-slide-css='{ "top": "20px",   "left": "20px" }'>
    <img src="https://malsup.github.io/images/p3.jpg" data-cycle-slide-css='{ "top": "10px",   "left": "-10px" }'>
    <img src="https://malsup.github.io/images/p4.jpg" data-cycle-slide-css='{ "top": "-20px",  "left": "-20px" }'>
</div>

Shuffle Options

Options are set on the slideshow element using data-cycle-option-name attributes. Option attribute names are always lowercase and prefixed with data-cycle-. For example, to set the shuffle-right option you would use the data-cycle-shuffle-right attribute.