Cross-fading Text Rotator Plugin With jQuery - Text Fade Delay

Text Fade Delay is a jQuery text rotator/carousel plugin used to fade in/out a list of text content at a given speed. Example use cases are quotes from reviews of your product or from famous people relevant to your site.

Installation:

# NPM
$ npm install jquery-text-fade-delay

# Bower
$ bower install jquery-text-fade-delay

How to use it:

1. Import the jQuery Text Fade Delay plugin into your project. Make sure you first have jQuery library installed.

import fader from "jquery-text-fade-delay";

2. Create a list of blockquotes for your quotes.

<ul id="quotes">
  <li>
    <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</blockquote> <cite>&mdash; Alabama</cite> </li>
  <li>
    <blockquote>Excepteur sint occaecat cupidatat non proident!</blockquote> <cite>&mdash; Georgia</cite> </li>
  <li>
    <blockquote>Duis aute irure dolor in reprehenderit?</blockquote> <cite>&mdash; Illinois</cite> </li>
  <li>
    <blockquote>Dolore eu fugiat nulla pariatur.</blockquote> <cite>&mdash; West Virginia</cite> </li>
</ul>

3. Initialize the text rotator with default settings.

$("#quotes").fader()

4. Config the text rotator using the following settings.

$("#quotes").fader({
  fadeSpeed: 500,
  duration: 2000,
  citeDelay: 1200,
  citeFadeSpeed: 750
})

Changelog:

2019-01-16

• Updating dependencies / using ES6 / code cleanup

---

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