jquery-ui-carousel

by richardscarrott

richardscarrott / jquery-ui-carousel

jQuery RS Carousel is a responsive and touch-enabled carousel written on top of jQuery and the jQuer...

195 Stars 61 Forks Last release: Not found 145 Commits 10 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

jQuery RS Carousel Quick Start

Include the following JavaScript and CSS:
















This is the basic HTML structure required:


Here's the JavaScript:

$(document).ready(function () {
    $('.rs-carousel').carousel();
});

And here's the generated markup:


Documentation

Options

mask: '> div'
(string)

A jQuery selector to match the

.rs-carousel-mask
element. The DOM is queried from the widgets root element. If the mask isn't found it will get dynamically added by the plugin.

runner: '> ul'
(string)

A jQuery selector to match the

.rs-carousel-runner
element. If the mask was found the DOM is queried from the mask otherwise it will be queried from the widgets root element.

items: '> li'
(string)

A jQuery selector to match the

.rs-carousel-item
element(s). The DOM is queried from the widgets runner.

itemsPerTransition: 'auto'
(string, number)

Sets the number of items to scroll per transition, if set to 'auto' the number of items scrolled will be based on how many items are visible.

orientation: 'horizontal'
(string)

Sets the orientation of the carousel, either 'horizontal' or 'vertical'.

loop: false
(boolean)

If set to true carousel will loop back to first or last page accordingly.

whitespace: false
(boolean)

If set to true the carousel will allow whitespace to be seen when there aren't enough items to fill the last page.

nextPrevActions: true
(boolean)

Sets whether the next and prev actions are included, next and prev actions are inserted as anchor tags.

insertPrevAction: function () { return $('Prev').appendTo(this); }
(function)

Allows you to define the prev actions mark-up as well as its location in the DOM.

The context of the function will be the carousels root element and the function should return a jQuery object, e.g.

function () {
    // this === 
    return $('Prev').appendTo(this);
}

insertNextAction: function () { return $('Next').appendTo(this); }
(function)

Allows you to define the prev actions mark-up as well as its location in the DOM.

The context of the function will be the carousels root element and the function should return a jQuery object, e.g.

function () {
    // this === 
    return $('Next').appendTo(this);
}

pagination: true
(boolean)

Sets whether pagination links should be included, pagination links are constructed as an ordered list.

insertPagination: function (pagination) { return $(pagination).insertAfter($(this).find('.rs-carousel-mask')); }
(function)

Allows you to override where in the DOM the pagination links are inserted as well as decorate them with any required HTML.

The context of the function will be the carousels root element and the function should return a jQuery object containing the

pagination
, e.g.
function (pagination) {
    // this === 
    // pagination === 
    return $(pagination).insertAfter($(this).find('.rs-carousel-mask'));
}

speed: 'normal'
(string)

Sets the speed of the carousel.

NOTE: If using

translate3d
the speed must be set within CSS, for example:
.rs-carousel-transition .rs-carousel-runner {
    -moz-transition-duration: .200s;
    -webkit-transition-duration: .200s;
    -o-transition-duration: .200s;
    -ms-transition-duration: .200s;
    transition-duration: .200s;
}

easing: 'swing'
(string)

Sets the easing equation used.

disabled: false
(boolean)

If set to true carousel will no longer change state.

translate3d: false
(boolean)

If set to true 3d css transforms are used instead of standard css left and top properties which can often result in smoother animations through hardware acceleration, this is especially apparent on iOS devices.

NOTE: jquery.rs.carousel doesn't handle feature detection of translate3d, instead this is left to third party libs such as Modernizr. An example usage might be:

$('.rs-carousel').carousel({
    translate3d: Modernizr && Modernizr.csstransforms3d
});

autoScroll: false
(boolean)

Set to true to invoke auto scrolling, note when the mouse enters the carousel the interval will stop, it'll consequently begin when the mouse leaves.

NOTE: Requires the autoScroll extension (jquery.rs.carousel-autoscroll.js).

pause: 8000
(number)

Sets the amount of time in miliseconds the carousel waits before it automatically scrolls.

NOTE: Requires the autoScroll extension (jquery.rs.carousel-autoscroll.js).

continuous: false
(boolean)

If set to true the carousel will continuously loop through its pages rather than scrolling all the way back to the first page.

NOTE: Requires the continuous extension (jquery.rs.carousel-continuous.js).

touch: false
(boolean)

If set to true the carousel will become draggable allowing you to flick through pages.

NOTE: Currently the carousel will also be draggable using a mouse on non-touch devices, if this is undesired it can be conditionally turned on or off using a feature detection library such as Modernizr:

$('.rs-carousel').carousel({
    touch: Modernizr && Modernizr.touch
});

NOTE: Requires the touch extension (jquery.rs.carousel-touch.js).

Events

create: null
(function)

Fired on first call.

It can be passed in the options object like this:

$(':rs-carousel').carousel({
   create: function (event, data) { ... }
});

and bound as an event like this:

$(':rs-carousel').on('carouselcreate', function (event, data) {
    ...
});

before: null
(function)

Fired before transition. Calling

preventDefault
on the event object will prevent the carousel from scrolling.

It can be passed in the options object like this:

$(':rs-carousel').carousel({
    before: function (event, data) { ... }
});

and bound as an event like this:

$(':rs-carousel').on('carouselbefore', function (event, data) {
    ...
});

after: null
(function)

Fired after transition.

It can be passed in the options object like this:

$(':rs-carousel').carousel({
    after: function(event, data) { ... }
});

and bound as an event like this:

$(':rs-carousel').on('carouselafter', function(event, data) {
    ...
});

All callbacks provide two arguments, the first of which is the

event
object which contains an
animate
property to determine whether the transition was animated or not (this can be useful if you're syncing up other animations with the slide). Also the
event.originalEvent
can be inspected to determine which method was used to invoke the transition, be it
next
,
prev
or
goToPage
.

The second argument is

data
which provides access to the carousels core elements as well as the current and previous pages:
{
    page: (jQuery object),
    prevPage: (jQuery object),
    elements: {
        mask: (jQuery object)
        runner: (jQuery object)
        items: (jQuery object)
        pagination: (jQuery object)
        nextAction: (jQuery object)
        prevAction: (jQuery object)
    }
}

Methods

next
$(':rs-carousel').carousel('next')

Moves to the next page.

prev
$(':rs-carousel').carousel('prev')

Moves to the prev page.

goToPage
$(':rs-carousel').carousel('goToPage', page [, animate])

Moves to the specified zero based

page
. If
animate
is set to false it'll jump straight there.

goToItem
$(':rs-carousel').carousel('goToItem', item [, animate])

Moves to page containing

item
,
item
can be a zero based number, a vanilla DOM element or a jQuery object. If
animate
is set to false it'll jump straight there.

refresh
$(':rs-carousel').carousel('refresh')

Refreshes carousel based on new state. The carousel can be made responsive by calling this method on the windows resize event.

getPage
$(':rs-carousel').carousel('getPage' [, index])

Returns a jQuery object containing the items on the page found at

index
. If
index
is omitted it'll return the current page.

getPages
$(':rs-carousel').carousel('getPages')

Returns the array of pages e.g. [jQuery(li, li, li), jQuery(li, li, li, li), jQuery(li, li, li), jQuery(li, li)]

getIndex
$(':rs-carousel').carousel('getIndex')

Returns the index of the current page.

getPrevIndex
$(':rs-carousel').carousel('getPrevIndex')

Returns the index of the previous page.

getNoOfPages
$(':rs-carousel').carousel('getNoOfPages')

Returns the number of pages.

getNoOfItems
$(':rs-carousel').carousel('getNoOfItems')

Returns number of items in carousel.

add
$(':rs-carousel').carousel('add', items)

Appends items to carousel,

items
can be DOM element, HTML string, or jQuery object.

remove
$(':rs-carousel').carousel('remove', selector)

Removes the items matched by

selector
from the carousel.

option
$(':rs-carousel').carousel('option', optionName [, value])

Get or set any carousel option. If no

value
is specified, will act as a getter.

option
$(':rs-carousel').carousel('option' [, options])

Get or set multiple carousel options at once by providing an

options
object. If
options
is omitted it will return all options.

disable
$(':rs-carousel').carousel('disable')

Disables the carousel and adds the

'rs-carousel-disabled'
className to the root element.

enable
$(':rs-carousel').carousel('enable')

Enables the carousel and removes the

'rs-carousel-disabled'
className from the root element.

widget
$(':rs-carousel').carousel('widget')

Returns the root element.

destroy
$(':rs-carousel').carousel('destroy')

Removes the carousel functionality completely. This will return the element back to its pre-init state.

Thank you

BrowserStack

BrowserStack for providing a free subscription to support cross browser testing.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.