How to use

The easiest setup possible:

new MerryGoRound(element);

Given that element contains some children, MerryGoRound will wrap element with a container element (configurable), then size element to be the sum of its children's widths and margins. Next it calculates which elements to scroll to when the next/previous buttons are pushed. It then injects the next/previous buttons and optionally the pagination controls.

An example that uses some options:

new MerryGoRound(element, {
    per_page      : 2, 
    cycle         : true,
    page_controls : true,
    selector      : 'li'
});

What changes with this MerryGoRound is:

1. When clicking next/previous only two elements are shifted at a time.
2. When reaching the end/start the buttons stay and allow you to wrap around.
3. Pagination controls are created and injected (see screenshot above).
4. Only the li tags directly inside of element will be used.

Sytax

new MerryGoRound(element, [options])

Arguments

1. element - (mixed) An Element or an id string.
2. options - (object, optional) the options described below:

Options

• selector : (string) Selector to pass to element.getChildren to determine scrolling elements. Defaults to '*'.
• cycle : (boolean) Pass true to keep next/previous controls when at the star/end. Defaults to false.
• per_page : (number) How many elements to scroll on next/previous. Defaults to 'auto'.
• page_controls : (boolean) Pass true to inject page controls. Defaults to false.
• fx_options : (object) Options to pass to Fx constructor.
• wrapper_width : (number) Width of carousel. Defaults to width of element passed.
• wrapper_height : (number) Height of carousel. Defaults to height of element passed.
• wrapper_tag : (string) Tag for wrapper. Defaults to div.
• wrapper_options : (object) Options to pass to Element constructor.
• button_event : (string) Event for next/previous buttons. Defaults to 'click'.
• previous_button_tag : (string) Tag for buttons. Defaults to 'a'.
• previous_button_options : (object) Options to pass to Element constructors.
• next_button_tag : (string) Tag for buttons. Defaults to 'a'.
• next_button_options : (object) Options to pass to Element constructors.
• current_page_class : (string) Class for active pagination marker. Defaults to 'merry-go-round-current-page'.
• page_controls_tag : (string) Tag for pagination element. Defaults to 'div'.
• page_controls_options : (object) Options to pass to pagination Element constructor.

Events

• pageShown : The function to execute when the a page is shown. Gets passed the page index and the instance of MerryGoRound.

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.