Morphist

A simple, high-performance and cross-browser jQuery slider / slideshow / carousel plugin for child objects powered by Animate.css.

It cycles through an element's [child] objects containing any content (i.e. images, text, etc) in quick succession and it is a great tool for displaying tweets from Twitter or items from other feeds. It is a spin-off project of Morphext (a simple text rotator).

Website / Demo

Install

Download from the project page.

Install with Bower: bower install --save Morphist

Usage

1. Import the latest Animate.css and jQuery library into your HTML.

2. Import morphist.css and include morphist.min.js in your HTML document.

3. Encapsulate your rotating objects (children, e.g. list item) in an element (parent, e.g. unordered list):

   I am a...
   <ul id="js-rotating">
       <li>So Simple</li>
       <li>Very Doge</li>
       <li>Much Wow</li>
       <li>Such Cool</li>
   </ul>
   ...child object rotator.
   

4. Trigger the plugin by calling Morphist() on the element (parent) containing the rotating objects (children):

   $("#js-rotating").Morphist();
   

A demo titled index.html is included in this repository. Open it to see the end-result.

Options

Morphist exposes the following options to alter the behaviour of the plugin:

They may be used like so:

$("#js-rotating").Morphist({
    animateIn: "fadeIn", // Overrides default "bounceIn"
    animateOut: "zoomOut", // Overrides default "rollOut"
    speed: 3000, // Overrides default 2000
    complete: function () {
        // Overrides default empty function
    }
});

The plugin relies heavily on Animate.css for its smooth, high performance animations to transition between each object. Thus, the default animation speed (different from the interval between each object as described above) may be altered via CSS:

#yourElement, .yourClass {
    /* Overrides Animate.css 1s duration */
    -vendor-animation-duration: 3s;
}

"Issues"

Refer to Morphext's "Issues".

Should you encounter any problems or require assistance with this plugin, simply open a GitHub issue in this repository or you may contact me via Twitter.

Prerequisites

• jQuery
• Animate.css

License

Morphist is licensed under the MIT license (http://ian.mit-license.org/).