JSFiddle - React, Tailwind, and code Playground

by m4xout

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<div id="testimonials">

	<div class="testimonial">
		&quot;Text text text text text text text text text text text text text text text text text text text text text text text text text text text text &quot; - <span>Person - 1</span>
	</div>

	<div class="testimonial">
		&quot;Text text text text text text text text text text text text text text text text text text text text text text text text text text text text &quot; - <span>Person - 2</span>
	</div>



</div>

CSS

#testimonials
{
    width:200px;
    height:200px;
    max-height: 200px;
}
.testimonial
{
    display: none;
}
.testimonial span
{
    color:red;
}

JavaScript

function roll(){
    var curr = 1;
    var count = 2;
    $('#testimonials .testimonial:nth-child(1)').show("slide", { direction: "down" }, 500);
    setInterval(function(){
        //console.log('C:'+curr);
        $('#testimonials .testimonial').hide("slide", { direction: "up" }, 500);
        $('#testimonials .testimonial:nth-child('+curr+')').delay(750).show("slide", { direction: "down" }, 500);
        curr++;
        if(curr == count+1){
            // 5000 - 500 - 750 - 500 = 3250    =>    delay = 3000
            $('#testimonials .testimonial:nth-child(4)').delay(3000).hide("slide", { direction: "up" }, 500);
            curr = 1;
        }
    }, 5000);
}

roll();