Home

mdbiscan edited this page Sep 14, 2010 · 15 revisions
Clone this wiki locally

Requirements

  1. A list (ul or ol)
  2. Width and Height options

Example:

<ul><li>item 1</li></ul>

Calling the Plugin

$('ul').simpleCarousel({ height:100, width:100 })

Options

width

Sets the width of the carousel. Width is applied to the following elements:

  1. $container
  2. $wrapper
  3. $list (gets the width multiplied by the number of items. (example: 100px x 5 items = 500px)
  4. $items

Default: ‘auto’
A number is required when instantiating

height

Sets the height of the carousel. Height is applied to the following elements:

  1. $container
  2. $wrapper
  3. $list
  4. $items

Default: ‘auto’
A number is required when instantiating

showItems

Sets the amount of items shown at a time. The carousel will scroll this amount as well.

Default: 1

animationSpeed

Sets the scrolling speed for the carousel.

Default: 250

loop

Sets whether or not the carousel will loop forward or backward from each end.

Default: false

Public Functions

externalPager();

Scroll to an item or set of items via a link outside the carousel.

$.fn.simpleCarousel.externalPager(page);

Example:
$(‘a.link’).click(function() {
$(‘.simpleCarousel’).simpleCarousel.externalPager(4);
});

getDimensions();

Return the carousel’s numeric dimensions.

Get width
$.fn.simpleCarousel.getDimensions().width;

Returns:
Number

Get height
$.fn.simpleCarousel.getDimensions().height;

Returns:
Number

getControls();

Returns carousel control elements.

Get nextControl
$.fn.simpleCarousel.getControls().next;

Returns:
[a.simpleCarouselNext]

Get prevControl
$.fn.simpleCarousel.getPrevButton().prev;

Returns:
[a.simpleCarouselPrev]

Exposing page context

Next and prev controls get their href values updated to the step they are going to on initial setup and events bound to next/prev controls.

Example
<a class="simpleCarouselNext" href="3">next</a>
<a class="simpleCarouselPrev" href="1">prev</a>