Adding a Play/Pause Button to Your Elementor Loop Carousel Slider

Elementor’s Loop Carousel widget is a powerful tool for showcasing dynamic content, but one feature it lacks out-of-the-box is a play/pause button for autoplaying sliders. This button is crucial for improving accessibility and giving users control over sliding content. In this blog, you’ll learn how to add a customizable play/pause button to your Elementor slider using JavaScript.

Why Add a Play/Pause Button?

Lets visitors pause slides to read content at their own pace.
Improves accessibility for users who rely on assistive technologies.
Prevents distractions on time-sensitive pages.

The Solution: JavaScript to the Rescue

Below is a step-by-step breakdown of the code that adds this functionality. You can implement this without editing Elementor’s core files by injecting the script into your WordPress site using a plugin like WPCode or your theme’s custom JS section.

Code Overview

(function () {
    const observer = new MutationObserver(function (mutations, obs) {
        try {
            const swiperWrapper = document.querySelector('.elementor-widget-loop-carousel .swiper-initialized .swiper-wrapper');
            if (swiperWrapper) {
                setupSliderControls();
                obs.disconnect();
            }
        } catch (error) {
            console.log(error);
            obs.disconnect();
        }
    });
    observer.observe(document, { childList: true, subtree: true });

    function setupSliderControls() {
        document.querySelectorAll('.elementor-widget-loop-carousel').forEach(function ($thisWidget, index) {
            var $slider = $thisWidget.querySelector('.swiper.swiper-initialized');
            var $swiperWrapper = $slider.querySelector('.swiper-wrapper');
            var swiperWrapperId = $swiperWrapper.id || `swiper-wrapper-${index}`;
            $swiperWrapper.id = swiperWrapperId;
            
            var $button = document.createElement('button');
            $button.textContent = 'Pause';
            $button.id = `pause-button-${index}`;
            $button.setAttribute('aria-controls', swiperWrapperId);
            $button.setAttribute('aria-label', 'Pause Slider');
            $button.setAttribute('aria-pressed', 'false');
            $slider.appendChild($button);
            
            $button.addEventListener('click', function () {
                var $newSlider = $thisWidget.querySelector('.swiper.swiper-initialized');
                if (this.textContent === 'Pause') {
                    $newSlider.swiper.autoplay.stop();
                    this.textContent = 'Resume';
                    this.setAttribute('aria-pressed', 'true');
                } else {
                    $newSlider.swiper.autoplay.start();
                    this.textContent = 'Pause';
                    this.setAttribute('aria-pressed', 'false');
                }
            });
        });
    }
})();

Implementation Steps

Ensure Autoplay is enabled in your Elementor Loop Carousel settings.
Ensure Pause on hover is disabled in your Elementor Loop Carousel settings.
Ensure Pause on interaction is disabled in your Elementor Loop Carousel settings.
Verify jQuery is loaded on your site (most themes include it by default).
Add the Code:
- Option 1: Use a plugin like WPCode to inject the script sitewide.
- Option 2: Place the code in your theme’s footer.php or custom JS section.
Customize the Button (Optional) using the following CSS:

button[id^="pause-button"] {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 10;
    padding: 8px 15px;
    background: #333;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 3px;
}

Loop Carousel Settings

Troubleshooting

Button Not Appearing: Confirm your slider uses the class .elementor-widget-loop-carousel. Adjust the selector if needed.
Autoplay Not Working: Ensure autoplay is enabled in Elementor’s widget settings. Test if Swiper.js is initialized correctly using browser dev tools.

Conclusion

By adding a play/pause button, you empower users to interact with your sliders on their terms. This solution is lightweight, accessible, and compatible with Elementor’s dynamic content. Customize the button’s look and behavior to match your site’s design, and enjoy smoother user interactions!

Menu