JSFiddle - React, Tailwind, and code Playground
by brightonmike
HTML
<link rel="stylesheet" href="http://inspiredworx.com/dev/geoff/css/style.css">
<div id="quotes">
<blockquote id="testimonials">
<div class="textItem">"My boiler had broken and I had no hot water or heating. Geoff Griffiths came and fixed it for me within the same day. Excellent service and will recommend to all of my friends."</div>
<div class="textItem">How often have I said to you that when you have eliminated the impossible, whatever remains, however improbable, must be the truth?</div>
<div class="textItem">It is a capital mistake to theorize before one has data. Insensibly one begins to twist facts to suit theories, instead of theories to suit facts.</div>
<div class="textItem">We must fall back upon the old axiom that when all other contingencies fail, whatever remains, however improbable, must be the truth.</div>
</blockquote>
<img alt="Testimonials" src="images/testimonials-icon.png" />
</div>
<script>
$(document).ready(function() //Testimonials text Rotator
{
setupRotator();
function setupRotator()
{
if($('.textItem').length > 1)
{
$('.textItem:first').addClass('current').fadeIn(1000);
setInterval('textRotate()', 3000);
}
}
});
function textRotate()
{
var current = $('#testimonials > .current');
if(current.next().length == 0)
{
current.removeClass('current').fadeOut(1000);
$('.textItem:first').addClass('current').fadeIn(500)
}
else
{
current.removeClass('current').fadeOut(500);
current.next().addClass('current').fadeIn(1000)
}
}
</script>