CONVEYOR-BELT
depends on jQuery 1.8.0 +
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.
Plugin SitePREREQUISITES: 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 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 |