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

- Type: HTML
- Runs: Site-wide footer
- Category: [Accessibility](https://wpide.com/library/category/accessibility/)
- Tags: sliders, carousel, reduced-motion
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/a11y-pause-buttons-for-sliders/

## Code

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

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Pause Buttons for Auto-Rotating Sliders" 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/