Simple Content Rotator Plugin with jQuery and Animate.CSS - Morphist

File Size: 8.52 KB
Views Total: 1742
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple Content Rotator Plugin with jQuery and Animate.CSS - Morphist

Morphist is a simple to use jQuery content slider/carousel/rotator plugin used to loop infinitely through an unordered list of Html content with cool CSS3 animations powered by Animate.css.

See also:

Basic Usage:

1. Load the necessary jQuery library and Animate.CSS CSS3 library in your web page.

<link href="" rel="stylesheet">
<script src="//"></script>

2. Load the jQuery Morphist plugin's JavaScript and CSS files in the web page.

<link href="dist/morphist.css" rel="stylesheet">
<script src="dist/morphist.js"></script>

3. Create a list of elements for the rotator.

<ul id="demo">
  <li><img src=""></li>
  <li><img src=""></li>
  <li><img src=""></li>
  <li><img src=""></li>

4. Call the plugin on the Html list and setup the animation types you want to use. Refer to Animate.css for a list of available animations.


// animation styles
animateIn: 'fadeInLeft',
animateOut: 'lightSpeedOut',

// animation speed
speed: 2000,

// callback
complete: $.noop


Change log:

v2.1.2 (2015-04-14)

  • Updated dependencies

This awesome jQuery plugin is developed by MrSaints. For more Advanced Usages, please check the demo page or visit the official website.