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 Site 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
```javascript $('.container').conveyor({ ul:'.images', fit:'portrait', transition:'blend', startPosition:'last', direction:'backward', ease:'$cubic-bezier(0.230, 1.000, 0.320, 1.000)' }); ```