Rotating Testimonials
Shows the items inside any block with the class "wpide-rotator" (for example Quote blocks in a Group) one at a time, rotating every few seconds with dot buttons to pick one.
Opens WPIDE on
Code
<style>
.wpide-rotator>.wpide-rotator__item[hidden]{display:none;}
.wpide-rotator__dots{display:flex;justify-content:center;gap:8px;margin-top:1em;}
.wpide-rotator__dots button{width:12px;height:12px;padding:0;border:2px solid currentColor;border-radius:50%;background:transparent;cursor:pointer;opacity:.6;}
.wpide-rotator__dots button[aria-current="true"]{background:currentColor;opacity:1;}
@media (prefers-reduced-motion:no-preference){.wpide-rotator__item{animation:wpide-rotator-in .5s ease;}}
@keyframes wpide-rotator-in{from{opacity:0;}to{opacity:1;}}
</style>
<script>
document.querySelectorAll('.wpide-rotator').forEach(function (box) {
var items = Array.prototype.slice.call(box.children);
if (items.length < 2) { return; }
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var dots = document.createElement('div');
dots.className = 'wpide-rotator__dots';
var current = 0, timer = null;
function show(i) {
current = (i + items.length) % items.length;
items.forEach(function (item, n) { item.hidden = n !== current; });
Array.prototype.forEach.call(dots.children, function (d, n) { d.setAttribute('aria-current', n === current ? 'true' : 'false'); });
}
items.forEach(function (item, n) {
item.classList.add('wpide-rotator__item');
var d = document.createElement('button');
d.type = 'button';
d.setAttribute('aria-label', 'Show item ' + (n + 1));
d.addEventListener('click', function () { show(n); });
dots.appendChild(d);
});
box.appendChild(dots);
show(0);
function start() { if (!reduce) { stop(); timer = setInterval(function () { show(current + 1); }, 6000); } }
function stop() { if (timer) { clearInterval(timer); timer = null; } }
box.addEventListener('mouseenter', stop);
box.addEventListener('mouseleave', start);
box.addEventListener('focusin', stop);
box.addEventListener('focusout', start);
start();
});
</script>Notes
Add wpide-rotator to a Group containing your quotes. Rotation pauses on hover and keyboard focus, and is off for visitors who prefer reduced motion.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.