JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="cyclelist">
  <li>
       <p>Lorem 
            <a href="#">Link</a>
        </p>
        
    
    </li>
    
  <li>
      <p>Lorem Ipsum Dolor Sit Amer
            <a href="#">Link</a>
        </p>
             
    
    </li>
</ul>
<div class="image">
<img src="http://www.placehold.it/100x300" />
</div>

CSS

ul#cyclelist {width:100px;position:relative;overflow:hidden; height:300px; float:left;}
ul#cyclelist li {font-size:1.4em;padding:20px;opacity:0;position:absolute; list-style:none; }
.image
{
    float:left;
    
}

JavaScript

$(document).ready(function() {
    
    //alert('hi');
    
    $('.image').animate({"opacity" : "0"} ,0);
    
    $('.image').animate({"opacity" : "1"} ,2000);

     var j = 0;
     var delay = 2000; //millisecond delay between cycles
     function cycleThru(){
             var jmax = $("ul#cyclelist li").length -1;
            // alert(jmax);
             
             $("ul#cyclelist li:eq(" + j + ")")
                     .animate({"opacity" : "1"} ,400)
                     .animate({"opacity" : "1"}, delay)
                     .animate({"opacity" : "0"}, 400, function(){
                             (j == jmax) ? j=0 : j++;
                             cycleThru();
                     });
             };

     cycleThru();

});