Pause Buttons for Auto-Rotating Sliders
Adds a visible pause/play button to every auto-rotating Swiper slider on the page (used by many themes, Elementor and slider plugins) and stops them automatically for visitors who prefer reduced motion.
Opens WPIDE on
Code
<style>
.wpide-slider-pause{position:absolute;right:8px;bottom:8px;z-index:20;padding:6px 12px;border:2px solid #fff;border-radius:4px;background:rgba(0,0,0,.7);color:#fff;font-size:14px;cursor:pointer;}
.wpide-slider-pause:focus-visible{outline:3px solid #ffeb3b;outline-offset:2px;}
</style>
<script>
window.addEventListener('load', function () {
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
document.querySelectorAll('.swiper, .swiper-container').forEach(function (el) {
var swiper = el.swiper;
if (!swiper || !swiper.autoplay || !swiper.params.autoplay || el.querySelector('.wpide-slider-pause')) { return; }
var btn = document.createElement('button');
btn.type = 'button';
btn.className = 'wpide-slider-pause';
function set(paused) {
if (paused) { swiper.autoplay.stop(); } else { swiper.autoplay.start(); }
btn.textContent = paused ? 'Play slideshow' : 'Pause slideshow';
btn.setAttribute('aria-pressed', paused ? 'true' : 'false');
}
btn.addEventListener('click', function () { set(btn.getAttribute('aria-pressed') !== 'true'); });
if (getComputedStyle(el).position === 'static') { el.style.position = 'relative'; }
el.appendChild(btn);
set(reduce);
});
});
</script>Notes
Works with sliders built on Swiper; style .wpide-slider-pause to match your design.
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.