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).
Download from the project page.
Install with Bower: bower install --save Morphist
-
Import the latest Animate.css and jQuery library into your HTML.
-
Import
morphist.css
and includemorphist.min.js
in your HTML document. -
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.
-
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.
Morphist exposes the following options to alter the behaviour of the plugin:
Option | Type | Default | Description |
---|---|---|---|
animateIn | string |
bounceIn |
The entrance animation type (In). |
animateOut | string |
rollOut |
The exit animation type (Out). Refer to Animate.css for a list of available animations. |
speed | int |
2000 |
The delay between the changing of each object in milliseconds. |
complete | object Function |
null |
A callback that is executed after an item is animated in. |
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;
}
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.
Morphist is licensed under the MIT license (https://ian.mit-license.org/).