Elementor Slides Widget - Accessible Pause Button

script.js

// Wait for the DOM content to be fully loaded
document.addEventListener('DOMContentLoaded', function() {

    // Create a MutationObserver to watch for changes in the DOM
    const observer = new MutationObserver(function(mutations, obs) {
        // Look for the swiper wrapper element
        const swiperWrapper = document.querySelector('.elementor-main-swiper .swiper-wrapper');
        
        // If the swiper wrapper is found, set up slider controls and stop observing
        if (swiperWrapper) {
            setupSliderControls();
            obs.disconnect(); // Stop observing once we have initialized the controls
        }
    });

    // Start observing the document for child and subtree changes
    observer.observe(document, {
        childList: true,
        subtree: true
    });

    // Function to set up the slider controls
    function setupSliderControls() {
        // Loop through all elements with the class 'elementor-widget-slides'
        document.querySelectorAll('.elementor-widget-slides').forEach(function($thisWidget, index) {
            // Find the main swiper element within the current widget
            var $slider = $thisWidget.querySelector('.elementor-main-swiper');
            var $swiperWrapper = $slider.querySelector('.swiper-wrapper');
            var swiperWrapperId = $swiperWrapper.getAttribute('id');

            // If the swiper wrapper does not have an ID, assign a unique ID
            if (!swiperWrapperId) {
                swiperWrapperId = 'swiper-wrapper-' + index;
                $swiperWrapper.setAttribute('id', swiperWrapperId);
            }

            // Create a pause/resume button for the slider
            var buttonId = 'pause-button-' + index;
            var $button = document.createElement('button');
            $button.textContent = 'Pause';
            $button.setAttribute('id', buttonId);
            $button.setAttribute('aria-controls', swiperWrapperId);
            $button.setAttribute('aria-label', 'Pause Slider');
            $button.setAttribute('aria-pressed', 'false');
            // Insert the button before the slider in the DOM
            $slider.parentNode.insertBefore($button, $slider);

            // Add an event listener to handle the button's click event
            $button.addEventListener('click', function() {
                // Toggle autoplay and update button text and aria-pressed attribute
                if (this.textContent === 'Pause') {
                    $slider.swiper.autoplay.stop();
                    this.textContent = 'Resume';
                    this.setAttribute('aria-pressed', 'true');
                } else {
                    $slider.swiper.autoplay.start();
                    this.textContent = 'Pause';
                    this.setAttribute('aria-pressed', 'false');
                }
            });
        });
    }
});