Small Cross-fading Text Rotator Plugin For jQuery

File Size: 5.77 KB
Views Total: 4763
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>

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

<script src="//"></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.


/* 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:


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


  • added logic if only one item not to rotate


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