Download
User Rating: 0/5 ( 0 votes)
"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