Cycle2's tile transition plugin must be included in order to use the tile effects. See the Download page for a link to the tile plugin.

There are two separate tile transitions included in the tile plugin. They are tileSlide and tileBlind and they can be applied vertically or horizontally.

Simple

By default, a tile transition is vertical and uses 7 tiles.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.tile.js"></script>
...

<!-- tileSlide -->
<div class="cycle-slideshow" 
    data-cycle-timeout=0
    data-cycle-next="#next1"
    data-cycle-prev="#prev1"
    data-cycle-fx="tileSlide"
    >
    <img src="http://malsup.github.io/images/p1.jpg">
    <img src="http://malsup.github.io/images/p2.jpg">
    <img src="http://malsup.github.io/images/p3.jpg">
    <img src="http://malsup.github.io/images/p4.jpg">
</div>

<!-- tileBlind -->
<div class="cycle-slideshow" 
    data-cycle-timeout=0
    data-cycle-next="#next2"
    data-cycle-prev="#prev2"
    data-cycle-fx="tileBlind"
    >
    <img src="http://malsup.github.io/images/p1.jpg">
    <img src="http://malsup.github.io/images/p2.jpg">
    <img src="http://malsup.github.io/images/p3.jpg">
    <img src="http://malsup.github.io/images/p4.jpg">
</div>
<< Prev tileSlide Next >>
<< Prev tileBlind Next >>

Horizontal

Set the data-cycle-tile-vertical attribute to false for horizontal tiling.

<div class="cycle-slideshow" 
    data-cycle-timeout=0
    data-cycle-next="#next3"
    data-cycle-prev="#prev3"
    data-cycle-fx="tileBlind"
    data-cycle-tile-vertical=false
    >
    <img src="http://malsup.github.io/images/p1.jpg">
    <img src="http://malsup.github.io/images/p2.jpg">
    <img src="http://malsup.github.io/images/p3.jpg">
    <img src="http://malsup.github.io/images/p4.jpg">
</div>
<< Prev Next >>

Tile Count

Use the data-cycle-tile-count attribute to set the number of tiles.

<div class="cycle-slideshow" 
    data-cycle-timeout=0
    data-cycle-next="#next4"
    data-cycle-prev="#prev4"
    data-cycle-fx=tileSlide
    data-cycle-tile-vertical=false
    data-cycle-tile-count=15
    >
    <img src="http://malsup.github.io/images/p1.jpg">
    <img src="http://malsup.github.io/images/p2.jpg">
    <img src="http://malsup.github.io/images/p3.jpg">
    <img src="http://malsup.github.io/images/p4.jpg">
</div>
<< Prev Next >>

Per-Slide Tile Effects

The tile transition plugin supports per-slide effects, so you can specify the desired transition and options using data-cycle-* attributes on the slides themselves instead of on the slideshow container.

<div class="cycle-slideshow" 
    data-cycle-timeout=0
    data-cycle-next="#next5"
    data-cycle-prev="#prev5"
    >
    <img src="http://malsup.github.io/images/p1.jpg" data-cycle-fx=tileSlide data-cycle-tile-vertical=false>
    <img src="http://malsup.github.io/images/p2.jpg" data-cycle-fx=tileBlind data-cycle-tile-count=12>
    <img src="http://malsup.github.io/images/p3.jpg" data-cycle-fx=tileSlide data-cycle-tile-count=4>
    <img src="http://malsup.github.io/images/p4.jpg" data-cycle-fx=tileBlind data-cycle-tile-vertical=false>
</div>
<< Prev Next >>

Tile Options

Options can be set on the slideshow element or the slide element using data-cycle-option-name attributes. Option attribute names are always lowercase and prefixed with data-cycle-. For example, to set the tile-count option you would use the data-cycle-tile-count attribute.

NameDefault ValueDescription
tile-count7The number of tiles to use in the transition.
tile-delay100The number of milliseconds to delay each individual tile transition.
tile-verticaltrueSet to false for a horizontal transition.