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

• Auto-initialization
• Declarative options
• Variable timeout
• Variable speed
• Cross-fade transitions
• Scroll transitions

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">
</div>

Optional attributes for the container element:

Attribute	Default Value	Description
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! Example: <div class=tcycle data-timeout=3000 data-scss='{"top":"20px"}'>
data-speed	500	Number of ms for transtions to complete.
data-timeout	4000	Number of ms between transitions.

Step 3: Have a nice day

Demo

Download

Donate!

Donate with PayPal!