JSFiddle - React, Tailwind, and code Playground
HTML
<div class="testimonials">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
</div>
CSS
.item {display:none;}
JavaScript
var $items = $('.testimonials .item');
function swap($a, $b){
var $aNext = $a.next(),
$aParent = $a.parent();
$a.insertAfter($b);
if($aNext.length) $b.insertBefore($aNext);
else $aParent.append($b);
}
function shuffle($items){
var i, j;
for(i=$items.length-1; i>1; i--){
j = Math.floor(Math.random() * (i+1));
swap($items.eq(i), $items.eq(j));
}
}
shuffle($items);
$('.testimonials div:first').show();
setInterval(function(){
$('.testimonials div:first-child')
.fadeOut(1000)
.next('div')
.delay(1000)
.fadeIn(1000)
.end()
.appendTo('.testimonials')
},3000);