MooTools

How to use

Syntax

var myElSwap = new ElementSwap(elements[, options]);

Arguments

1. elements - (mixed) A collection of elements to add. Takes the same arguments as $$
2. options - (object, optional) An object with options. See below.

Options

• selectedClass - (string: defaults to 'active') the css class for the slide when it is displayed.
• elementSwapDelay - (integer: defaults to 3) the number of seconds to wait to change to the next slide.
• panelWrap - (string: defaults to 'elementSwapWrap') the id of the slide wrap.
• panelWrapClass - (string: defaults to 'elementSwap') the css class for the slide wrap.
• events - (boolean: defaults to true) whether to setup the slide events. On mouse enter the slide show stops, on mouse leave the slide show starts, on mouse click fires the onClickView event.
• activateOnLoad - (mixed: defaults to 0) which slide to activate on loading the class, can be the id of an element or the index number of the slides array
• autoPlay - (boolean: defaults to false) whether to start looping though the slides on initialization.

Events

• onActive - (function) callback executed when a slide is shown, passed two arguments: the index of the slide (integer), the slide (element)
• onClickView - (function) callback executed when the user clicks on the current slide, passed two arguments: the index of the slide (integer), the slide (element)
• onNext - (function) callback executed when the next method is executed.
• onPrevious - (function) callback executed when the previous method is executed.

Returns:

• (object) A new ElementSwap instance.

Example:

JavaScript

var elSwap = new ElementSwap('.div_swap');

CSS

#el1 {background-color:#f00;}
#el2 {background-color:#0f0;}
#el3 {background-color:#00f;}

.div_swap {
    position:absolute;
    top:0px;
    width:300px;
    height:300px;
    display:none;
}

.active { display:block; }

.elementSwap {
    position:relative;
    width:300px;
    height:300px;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
}

HTML

<div id="el1" class="div_swap"><p>DIV 1</p></div>
<div id="el2" class="div_swap"><p>DIV 2</p></div>
<div id="el3" class="div_swap"><p>DIV 3</p></div>

Requirements

• MooTools Core 1.2.4: Class, Class.Extras, Element, Selectors (and their dependencies)

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.