WordPress Oxygen page builder slider pause buttons

oxygen-flickity-pause.js

window.addEventListener('load', function () {
  setTimeout(function () {
    if (typeof Flickity === 'undefined') return;

    function updateButton(button, isPaused) {
      button.setAttribute('aria-pressed', isPaused ? 'true' : 'false');
      button.setAttribute(
        'aria-label',
        isPaused ? 'Play carousel autoplay' : 'Pause carousel autoplay'
      );

      button.innerHTML = `
        <span class="sr-only">
          ${isPaused ? 'Play carousel' : 'Pause carousel'}
        </span>
        <span class="carousel-toggle-icon" aria-hidden="true"></span>
      `;
    }

    document.querySelectorAll('.oxy-carousel-builder').forEach(function (carousel) {
      const flickityElement = carousel.querySelector('.flickity-enabled');
      if (!flickityElement || carousel.querySelector('.carousel-pause-toggle')) return;

      const flkty = Flickity.data(flickityElement);
      if (!flkty) return;

      const button = document.createElement('button');
      button.type = 'button';
      button.className = 'carousel-pause-toggle carousel-toggle-button';

      updateButton(button, false);

      const nextBtn = carousel.querySelector('.oxy-carousel-builder_next');
      (nextBtn ? nextBtn.parentNode : carousel).appendChild(button);

      button.addEventListener('click', function () {
        const isPaused = button.getAttribute('aria-pressed') === 'true';

        if (isPaused) {
          flkty.playPlayer();
          updateButton(button, false);
        } else {
          flkty.pausePlayer();
          updateButton(button, true);
        }
      });
    });
  }, 1000);
});

oxygen-unslider-pause.js

window.addEventListener('load', function () {
  setTimeout(function () {
    if (!window.jQuery) return;

    function updateButton(button, isPaused) {
      button.setAttribute('aria-pressed', isPaused ? 'true' : 'false');
      button.setAttribute(
        'aria-label',
        isPaused ? 'Play carousel autoplay' : 'Pause carousel autoplay'
      );

      button.innerHTML = `
        <span class="sr-only">
          ${isPaused ? 'Play carousel' : 'Pause carousel'}
        </span>
        <span class="carousel-toggle-icon" aria-hidden="true"></span>
      `;
    }

    document.querySelectorAll('.ct-slider').forEach(function (slider) {
      const container = slider.querySelector('.oxygen-unslider-container');
      if (!container || slider.querySelector('.unslider-pause-toggle')) return;

      const unslider =
        jQuery(container).data('unslider') ||
        jQuery(container.closest('.unslider')).data('unslider');

      if (!unslider) return;

      const button = document.createElement('button');
      button.type = 'button';
      button.className = 'unslider-pause-toggle carousel-toggle-button';

      updateButton(button, false);

      const nav = slider.querySelector('.unslider-nav');
      (nav || slider).appendChild(button);

      button.addEventListener('click', function () {
        const isPaused = button.getAttribute('aria-pressed') === 'true';

        if (isPaused) {
          unslider.start();
          updateButton(button, false);
        } else {
          unslider.stop();
          updateButton(button, true);
        }
      });
    });
  }, 1000);
});

style.css

/* ==========================================================
   SLIDER PLAY/PAUSE BUTTONS
   ========================================================== */
/* Base button */
.unslider-pause-toggle,
.carousel-pause-toggle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: #003a8f;
  color: white;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.carousel-pause-toggle {
  bottom: -45px;
}

.unslider-pause-toggle:hover,
.carousel-pause-toggle:hover {
  background-color: #00478a;
}

.unslider-pause-toggle:focus,
.carousel-pause-toggle:focus {
  outline-offset: 2px;
}

/* Screen reader text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Icon container */
.carousel-toggle-icon {
  position: relative;
  width: 16px;
  height: 12px;
  display: block;
}

/* =========================
   PAUSE (default)
   ========================= */
.carousel-toggle-icon::before,
.carousel-toggle-icon::after {
  content: '';
  position: absolute;
  top: 0;
  width: 4px;
  height: 12px;
  background: currentColor;
}

.carousel-toggle-icon::before {
  left: 2px;
}

.carousel-toggle-icon::after {
  right: 2px;
}

/* =========================
   PLAY (when paused)
   ========================= */
.carousel-pause-toggle[aria-pressed="true"] .carousel-toggle-icon,
.unslider-pause-toggle[aria-pressed="true"] .carousel-toggle-icon {
  width: 0;
  height: 0;
  border-left: 12px solid currentColor;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left:2px;
}

/* Hide pause bars in play state */
.carousel-pause-toggle[aria-pressed="true"] .carousel-toggle-icon::before,
.carousel-pause-toggle[aria-pressed="true"] .carousel-toggle-icon::after,
.unslider-pause-toggle[aria-pressed="true"] .carousel-toggle-icon::before,
.unslider-pause-toggle[aria-pressed="true"] .carousel-toggle-icon::after {
  display: none;
}

#-carousel-builder-741-25 .carousel-pause-toggle {
  left: 25px;
  bottom: -5px;
}