JSFiddle - React, Tailwind, and code Playground

HTML

<div id="rotating-item-wrapper">
    <div class="rotating-item intro">Text 1</div>
    <div class="rotating-item intro">Text 2</div>
    <div class="rotating-item intro">Text 3</div>
</div>

 <p class="slidermwtext"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. </p>

CSS

#rotating-item-wrapper {
	position: relative;

}
.rotating-item {
	display: none;
    text-align: center;
    font-size: 25px;
}

JavaScript

var InfiniteRotator = {
    init: function() {
        //initial fade-in time (in milliseconds)
        var initialFadeIn = 1000;

        //interval between items (in milliseconds)
        var itemInterval = 5000;

        //cross-fade time (in milliseconds)
        var fadeTime = 2500;

        //count number of items
        var numberOfItems = $('.rotating-item').length;

        //set current item
        var currentItem = 0;

        //show first item
        $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

        //loop through the items        
        var infiniteLoop = setInterval(function() {
            $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

            if (currentItem == numberOfItems - 1) {
                currentItem = 0;
            } else {
                currentItem++;
            }
            $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

        }, itemInterval);
    }
}

$(document).ready(function() { //start after HTML, images have loaded

// check if there is one image or more
    if($('#rotating-item-wrapper > div').length > 1){
        // run slider
        InfiniteRotator.init();
        
    }else{
        // just one image don't slide
        alert('just one image');
        $('.rotating-item').eq(0).fadeIn();
    }

});