Small Cross-fading Text Rotator Plugin For jQuery

A very small jQuery plugin which provides a simple way to sequentially or randomly fade-in / fade-out a list of text at a certain interval.

How to use it:

1. Create a list of text you want to cycle through on one line.

<ul id="demo">
  <li>Text 1</li>
  <li>Text 2</li>
  <li>Text 3</li>
  ...
</ul>

2. Like any other plugin, you must include the textrotator.js script after the jQuery library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.textrotator.js"></script>

3. Reset the html list styles.

#demo {
  list-style: none;
  ...
}

#demo li { display: none; }

4. Call the plugin on the html list to generate a basic text rotator.

$('#demo').textRotator({

/* Options here */

})

5. Available options to config the text rotator.

// is random?
random : true,

// fadeIn speed
fadeIn : 1000,

// fadeOut speed
fadeOut : 500,

// duration
duration : 5000,

// easing effect
easingin : 'swing',
easingout : 'swing'

Change log:

2016-01-24

• Added element specific configurations data-duration, data-easingin, and data-easingout
• Added configuration for easingin and easingout
• Added a true random of all elements, and not just a random starting point. 
• Fixed issue when going from end of elements to start of elements.

2015-12-29

• added logic if only one item not to rotate

2015-12-11

• JS update

---

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