JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">
    <div id="a1" style="position:relative">
        <img src=". .  ." />
        <div>
           <p style="width:350px; position:absolute; top:100px; left:10px">TEXT . .  .</p>
       </div>
    </div>
    <div id="a2" style="position:relative">
        <img src=". .  ." />
        <div>
            <p style="width:350px; position:absolute; top:100px; left:10px">TEXT . .  .</p>
         </div>
    </div>
    <div id="a3" style="position:relative">
        <img src=". .  ." />
        <div>
             <p style="width:350px; position:absolute; top:100px; left:10px">TEXT . .  .</p>
        </div>
    </div>
</div>

JavaScript

function Slider() {
    $(".slider #a1").show("fade", 500);
    $(".slider #a1").delay(5500).hide("slide", {
        direction: 'left'
    }, 500);
    var sc = $(".slider div").size();
    var count = 2;
    setInterval(function() {
        $(".slider #a" + count).show("slide", {
            direction: 'right'
        }, 500);
        $(".slider #a" + count).delay(5500).hide("slide", {
            direction: 'left'
        }, 500);
        if (count == sc) {
            count = 1;
        } else {
            count = count + 1;
        }
    }, 650);
}
Slider();