💬 Rotating Testimonial Text
This is a Javascript code that can be used on any site with a Business or Commerce subscription plan.
When placed inside a code block, this code will display the text inside the <quote> and <source> sections of the code. These can be modified, and duplicated for a many text segments as you need.
How to use this code
This code is designed to work on any page of your site where you can add a code block.
Pro Tip: This code is designed to match the paragraph text style on your site. You can adjust .quote and .source with CSS to make changes to the text format.
<!-- Rotating Testimonial Text Code from CustomCodey.com -->
<div id="quote-rotator">
<div class="quote-pair active">
<p class="quote">"The only limit to our realization of tomorrow is our doubts of today."</p>
<p class="source">– Franklin D. Roosevelt</p>
</div>
<div class="quote-pair">
<p class="quote">"Success is not final, failure is not fatal: It is the courage to continue that counts."</p>
<p class="source">– Winston Churchill</p>
</div>
<div class="quote-pair">
<p class="quote">"In the middle of every difficulty lies opportunity."</p>
<p class="source">– Albert Einstein</p>
</div>
<div class="quote-pair">
<p class="quote">"Believe you can and you're halfway there."</p>
<p class="source">– Theodore Roosevelt</p>
</div>
</div>
<style>
#quote-rotator {
position: relative;
}
.quote-pair {
opacity: 0;
transition: opacity 1s ease-in-out;
position: absolute;
top: 0;
left: 0;
}
.quote-pair.active {
opacity: 1;
position: relative;
}
.quote, .source {
margin: 0.5em 0;
text-align: center;
}
</style>
<script>
const quotes = document.querySelectorAll('#quote-rotator .quote-pair');
let current = 0;
setInterval(() => {
quotes[current].classList.remove('active');
current = (current + 1) % quotes.length;
quotes[current].classList.add('active');
}, 4000); // 3s visible + 1s fade
</script>