# 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.

- Type: HTML
- Runs: Site-wide footer
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: testimonials, slider, quotes
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-rotating-testimonials/

## Code

```html
<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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Rotating Testimonials" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/