Download
User Rating: 0/5 ( 0 votes)
CONVEYOR-BELT
Conveyor-Belt is a simple but well adjustable slideshow carousel jQuery plugin. Plenty of configurations available, including transition types, image fits, slideshow speeds
N.b This plugin is a work in progress - so is in its infancy. Generally all works as stated, but it has not been tested properly, and is awaiting many more features.
PREREQUISITES: You need a DIV with a UL and a load of LI's with IMAGES Use CSS to set the height and width of your $('.example') element - this will be the size of your slideshow.
<div class="example">
<ul id="cb-images">
<li><img src="img.png"/></li>
<li><img src="img.png"/></li>
<li><img src="img.png"/></li>
<li><img src="img.png"/></li>
</ul>
</div>
BASIC USAGE: all are optional
$('.example').plugin({
ul,
fit,
auto,
countdown,
speed,
startPosition,
transition,
ease,
direction,
overflow,
html,
controls,
buttonDimension
});
config options:
|
Option |
data type |
values |
default |
description |
|
ul |
string |
'#images' |
'#cb-images' |
id/class of parent
|
|
fit |
string;float |
'cover','landscape','portrait', .5 |
'cover' |
decimal is a percentage value of images original size |
|
auto |
float |
true, false |
true |
auto or manual slide show |
|
countdown |
float |
3000 |
3000 |
time in ms till next slide |
|
speed |
int |
400 |
400 |
transition speed in ms |
|
startPosition |
int |
1, 'last' |
1 |
choose where you want you show to start from |
|
transition |
string |
'vertical','horizontal','blend' |
'blend' |
transition types |
|
ease |
string |
'normal','in','out',$custom |
'normal' |
if adding a custom - you must prepend $ to your string first |
|
direction |
string |
'forward','backward' |
'forward' |
'next' or 'previous' directions for auto mode |
|
overflow |
boolean |
true, false |
true |
hides the overflow |
|
html |
boolean |
true, false |
false |
allows HTML content. Replace ![]() with a
including your content
|
|
controls |
boolean |
true, false |
false |
adds 'next' & 'previous' control buttons |
|
buttonDimension |
int |
100 |
20 |
value is in pixels - donates size of < and > buttons |
usage example
$('.container').conveyor({
ul:'.images',
fit:'portrait',
transition:'blend',
startPosition:'last',
direction:'backward',
ease:'$cubic-bezier(0.230, 1.000, 0.320, 1.000)'
});
JS Tutorial
