Customizable Text Rotator In Vanilla JavaScript

Preview:

Description:

A simple yet customizable text rotator that allows you to loop through a group of text strings wrapped in HTML elements with a cross-fading effect.

It can be useful for showcasing customer testimonials, promoting various products, or highlighting key benefits on your webpages.

How to use it:

1. Wrap the text you want to rotate in a span (or any other HTML element). The data-options attribute is required and holds the text options separated by the | character.

I Love <span class="text-rotator" data-options="JavaScript|CSS/CSS3|HTML5"></span>

2. Load the required JavaScript and CSS files in the document.

<link rel="stylesheet" href="src/styles.css" />
<script src="src/script.js"></script>

3. Initialize the text rotator and done.

document.addEventListener("DOMContentLoaded", function () {
  // initialize the text rotator on all elements with the text-rotator Class
  var elements = document.getElementsByClassName("text-rotator");
  for (var i = 0; i < elements.length; i++) {
    console.log(elements[i].id);
    new QubasTextRotatorTurbo(elements[i]);
  }
});

4. Config the text rotator by add the following HTML data attributes to the wrapper element.

• data-random: Control the randomization of text order. Default: “false”,
• data-mode: “fadeoutandreplace” (default) or “fadeoutthenreplace”
• data-rand-max-sleep: Define the max number of timing intervals between text changes. Default: “500”
• data-baseline-sleep: Define the baseline delays between text changes. Default: “2000”

<span 
  class="text-rotator" 
  data-options="JavaScript|CSS/CSS3|HTML5"
  data-random="true"
  data-mode="fadeoutthenreplace"
  data-rand-max-sleep="1000"
  data-baseline-sleep="5000">