ElementSwap 1.0.1

ElementSwap is a simple no frills Slide Show class that will swap between any element.



Details

Author
Shaun Freeman
Current version
1.0.1
GitHub
vincentbluff/ElementSwap
Downloads
3896
Category
Utilities
Tags
Report
GitHub Issues

Releases


Dependencies

  • core/1.2.4:
    • Class
    • Class.Extras
    • Element
    • Element.Event
    • Selectors

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


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.

blog comments powered by Disqus