JSFiddle - React, Tailwind, and code Playground

by jphellemons

HTML

<ul id="contentRotator">
<li class="cItem">
    <a href="#"><img src="" alt="img1" /></a>
    <h3><a href="#">Text1</a></h3>
    <p><a href="#">Text1</a></p>
</li>
<li class="cItem">
     <a href="#"><img src="" alt="img2" /></a>
    <h3><a href="#">Text2</a></h3>
    <p><a href="#">Text2</a></p>
</li>
<li class="cItem">
     <a href="#"><img src="" alt="img3" /></a>
    <h3><a href="#">Text3</a></h3>
    <p><a href="#">Text3</a></p>
</li>
</ul>

JavaScript

var duration = 4000;
    var speed = 500; //
    var arrDivs = $('#contentRotator .cItem');
    var arrLength = arrDivs.length;

    var iCurrent = 0;
    var iNext;

    arrDivs.not(arrDivs.eq(iCurrent)).hide();

    setInterval(function () {
        iNext = (iCurrent + 1) % arrLength;
        arrDivs.eq(iNext).fadeIn(speed);
        arrDivs.eq(iCurrent).fadeOut(speed);
        iCurrent = (iCurrent + 1) % arrLength;
    }, duration);