JSFiddle - React, Tailwind, and code Playground
HTML
<div id="testimonials">
<p data-testimonial="1">“Thank you so much for the reading. Your words made me cry, they rang so true. I am exactly where you described me to be, it was as if you were reading my soul.” – Julie S.</p>
<p data-testimonial="2">"After reading the messages that were sent (and crying for about 10 minutes because of the shock of it all and the accuracy) I did find “some” of the strength I had locked away deep inside.” – Melissa D.</p>
<p data-testimonial="3">"I feel like we’re good friends and the reading was done just like that, like Melanie was doing a reading over a cup of tea and chocolate chip biscuit with her friend (me) sitting across the table from her.” – Susan H.</p>
<p data-testimonial="4">"You have an amazing gift, I am so glad that I trusted you to do my reading. You see everything in such a positive way. Thank you again, you answered all my questions and more.” – Brenda C.</p>
<p data-testimonial="5">"Melanie’s reading was clear, accurate and compassionate. I highly recommend her.”
<br />- Kimberly N.</p>
<p data-testimonial="6">“Words cannot describe how thankful and appreciative I am for the effort you have poured into this. It has exceeded my expectations-blown them out of the water actually!” – Jag D.</p>
<p data-testimonial="7">“Thank you so much for your reading! It left me speechless because it is so true..you were very kind and brought me joy and a huge smile on my face..” – Diana F.</p>
<p data-testimonial="8">“I received your reading and it was dead on. Everything you said is true and accurate. I wasn’t really a believer until I got your reading. You convinced me.” – William D.</p>
<p data-testimonial="9">“Everything was right on. I only gave Melanie my name but it was like she traveled into my mind and past. With my reading complete I look forward to my future.” – Janie</p>
<p data-testimonial="10">“It was touching and comforting how you and your guides offered me great...
CSS
#testimonials {
float: left;
padding: 0 20px;
width: 350px;
height:166px;
}
#testimonials p {
font-size: 18px;
font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
font-style: italic;
display: table-cell;
vertical-align: middle;
height: 130px;
text-align: center;
}
#testimonials p[data-testimonial="1"] {
color: rgb(175, 78, 213);
}
#testimonials p[data-testimonial="2"] {
color: rgb(88, 175, 48);
}
#testimonials p[data-testimonial="3"] {
color: rgb(33, 102, 165);
}
#testimonials p[data-testimonial="4"] {
/*here down*/
color:#D5006A;
}
#testimonials p[data-testimonial="5"] {
color:#A6245B;
}
#testimonials p[data-testimonial="6"] {
color:#6F00DD;
}
#testimonials p[data-testimonial="7"] {
color:#008C46;
}
#testimonials p[data-testimonial="8"] {
color:#7A3582;
}
#testimonials p[data-testimonial="9"] {
color:#6060B0;
}
#testimonials p[data-testimonial="10"] {
color:#468C8C;
}
#testimonials p {
display:none;
}
JavaScript
$(document).ready(function () {
var shownTestimonials = [];
displayTestimonials(shownTestimonials);
function displayTestimonials(shownTestimonials) {
var totalTestimonials = 10;
console.log(shownTestimonials);
//console.log(shownTestimonials.length);
if (shownTestimonials.length == 0 || shownTestimonials.length == totalTestimonials) {
var shownTestimonials = [];
}
function getNewTestimonial(totalTestimonials) {
return Math.floor(Math.random() * totalTestimonials) + 1; //random number between 1 and 10
}
var currentTestimonial = $('#testimonials p.visible').attr('data-testimonial');
var newTestimonial = getNewTestimonial(totalTestimonials);
console.log(currentTestimonial);
if (currentTestimonial == null) {
$('#testimonials p[data-testimonial="' + newTestimonial + '"]').addClass('visible').fadeIn(700);
shownTestimonials.push(newTestimonial);
} else {
var newExists = 1;
while (newExists > -1) {
var newTestimonial = getNewTestimonial(totalTestimonials);
var newExists = $.inArray(newTestimonial, shownTestimonials)
console.log(newExists);
}
$('#testimonials p[data-testimonial="' + currentTestimonial + '"]').removeClass('visible').fadeOut(600);
setTimeout(function () {
$('#testimonials p[data-testimonial="' + newTestimonial + '"]').addClass('visible').fadeIn(700);
shownTestimonials.push(newTestimonial);
}, 700);
} //end else
setTimeout(function () {
displayTestimonials(shownTestimonials);
}, 12000);
} //end displayTestimonials();
}); //end $(document).ready