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:

• Simple Text Rotator Plugin with jQuery and CSS3 Animations - Morphext

Basic Usage:

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></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="https://unsplash.it/400/300?random"></li>
  <li><img src="https://unsplash.it/400/300?random"></li>
  <li><img src="https://unsplash.it/400/300?random"></li>
  <li><img src="https://unsplash.it/400/300?random"></li>
  ...
</ul>

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.

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

// 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.