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