$title = 'Shuffle'; include '../inc/inc_intro_demo.php'; ?>
Cycle2's shuffle transition plugin must be included in order to use the shuffle effect. See the Download page for a link to the shuffle plugin.
The shuffle effect is achieved by assignin the fx
option to shuffle
.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="/jquery.cycle2.js"></script> <script src="/jquery.cycle2.shuffle.js"></script> ... <div class="cycle-slideshow" data-cycle-fx=shuffle data-cycle-timeout=2000 > <img src="/images/p1.jpg"> <img src="/images/p2.jpg"> <img src="/images/p3.jpg"> <img src="/images/p4.jpg"> </div>
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="/jquery.cycle2.js"></script> <script src="/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="/images/p1.jpg"> <img src="/images/p2.jpg"> <img src="/images/p3.jpg"> <img src="/images/p4.jpg"> </div>
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="/images/p1.jpg"> <img src="/images/p2.jpg"> <img src="/images/p3.jpg"> <img src="/images/p4.jpg"> </div>
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="/images/p1.jpg">
<img src="/images/p2.jpg">
<img src="/images/p3.jpg">
<img src="/images/p4.jpg">
</div>
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="/images/p1.jpg" data-cycle-slide-css='{ "top": "-10px", "left": "10px" }'> <img src="/images/p2.jpg" data-cycle-slide-css='{ "top": "20px", "left": "20px" }'> <img src="/images/p3.jpg" data-cycle-slide-css='{ "top": "10px", "left": "-10px" }'> <img src="/images/p4.jpg" data-cycle-slide-css='{ "top": "-20px", "left": "-20px" }'> </div>
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.
Name | Default Value | Description |
---|---|---|
shuffle-left | 0 | Pixel position relative to the container's left edge to move the slide when transitioning. Set to negative to move beyond the container's left edge. |
shuffle-right | 0 | Number of pixels beyond right edge of container to move the slide when transitioning. |
shuffle-top | 15 | Number of slides to be displayed in the carousel. |
suffle-left
and shuffle-right
are mutually exclusive. If you
set them both the value for shuffle-right
will be ignored.