🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Conveyor-Belt, a simple but well adjustable slideshow carousel jQuery plugin.

Carousel

Documentation

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)' }); ```

    You May Also Like