Tile

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="https://malsup.github.io/jquery.cycle2.js"></script>
<script src="https://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="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>

<!-- tileBlind -->
<div class="cycle-slideshow" 
    data-cycle-timeout=0
    data-cycle-next="#next2"
    data-cycle-prev="#prev2"
    data-cycle-fx="tileBlind"
    >
    <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>

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="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>

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="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>

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="https://malsup.github.io/images/p1.jpg" data-cycle-fx=tileSlide data-cycle-tile-vertical=false>
    <img src="https://malsup.github.io/images/p2.jpg" data-cycle-fx=tileBlind data-cycle-tile-count=12>
    <img src="https://malsup.github.io/images/p3.jpg" data-cycle-fx=tileSlide data-cycle-tile-count=4>
    <img src="https://malsup.github.io/images/p4.jpg" data-cycle-fx=tileBlind data-cycle-tile-vertical=false>
</div>

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.

Name	Default Value	Description
tile-count	7	The number of tiles to use in the transition.
tile-delay	100	The number of milliseconds to delay each individual tile transition.
tile-vertical	true	Set to false for a horizontal transition.