"t" Stands for "Tiny"

And by "tiny" I mean less than 1 kilobyte.

tCycle is a minimalist jQuery slideshow plugin that won't blow your bandwidth budget. It supports the following features:

How to Use tCycle

Like Cycle2, tCycle is very easy to use. Easier actually, since there is less it can do.

Step 1: Include the necessary scripts

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

Step 2: Declare your markup

<div class="tcycle">
    <img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/p4.jpg">

Optional attributes for the container element:

AttributeDefault ValueDescription
data-fx"fade"The name of the effect to use. Set to "scroll" for a scrolling slideshow.
data-scss for fade tx:
{ position: absolute; top: 0; left: 0 }
for scroll tx:
{ position: absolute; top: 0; left: (container width) }
CSS to be applied to the slides; override to change the defaults. This must be valid JSON!
<div class=tcycle data-timeout=3000 data-scss='{"top":"20px"}'>
data-speed500Number of ms for transtions to complete.
data-timeout4000Number of ms between transitions.

Step 3: Have a nice day


Basic Demo


Download tCycle