Simple Content Slider/Rotator Plugin with jQuery and jQuery UI

A jQuery & jQuery UI based content slider/rotator plugin which allows you to cycle through a set of Html elements (images, text, inline elements).

How to use it:

1. Choose and include a jQuery UI's theme CSS in the head of the document.

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet">

2. Include jQuery library, jQuery UI and jQuery UI Rotator at the bottom for fast page loading.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script defer src="jquery.ui.rotator.js"></script>

3. Wrap your images (or any html elements) into a container.

<div id="image-rotator" class="demo">
  <img src="img/img1.png">
  <img src="img/img2.png">
  <img src="img/img3.png">
</div>

4. Call the plugin with default options.

$('.demo"]').rotator();

5. You can set any of the following options to customize it to fit your needs. The effect, enter and exit options align with the jQuery UI toggle API, and can be set accordingly:

// default options
$('selector').rotator({
  auto: true,       // rotate automatically
  effect: 'fade',   // slide or fade
  delay: 5000,      // delay between rotations
  selector: '> *',  // rotating containers/images, relative to selector used to initialize plugin

  // options for rotator being displayed
  enter: {
    direction: 'right', // default for 'slide', not used by 'fade'
    duration: 1000  // duration of the animation
  },

  // options for rotator being hidden
  exit: {
    direction: 'left', // default for 'slide', not used by 'fade'
    duration: 1000  // duration of the animation
  }
});

6. Options can be set using the data-options attribute as well, and passing it an object. For example:

<div data-role="rotator" data-options='{ "auto": false, "effect": "slide" }'>

  ...

</div>

---

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