JSFiddle - React, Tailwind, and code Playground

by chrisbenseler

HTML

<div id="testimonials">
    <q>1</q>
    <q>2</q>
    <q>3</q>
    <q>4</q>
    <q>5</q>
</div>

CSS

q {
    visibility:hidden;
  opacity:0;
  transition:visibility 0s linear 0.5s,opacity 0.5s linear;
    position: absolute;
}

q.show {
    visibility:visible;
  opacity:1;
  transition-delay:0s;
}

JavaScript

var qs = $("#testimonials q"), total = qs.length, current = 0;
var rotateQ = function() {
    qs.removeClass("show");
    $(qs[current]).addClass("show");
    
    if(current + 1< total)
        current++;
    else
        current = 0;
    
};
rotateQ();
setInterval(rotateQ, 2000);