Basic Hero Splide Slider

if(document.querySelector(".hero__slider")) {
      const homeSplide = new Splide( '.hero__slider', {
         type:          'loop',
         perPage:       1,
         arrows:        false,
         pagination:    true,
         autoplay    : !inCms,
         // rewind      : true,
         pauseOnHover: false,
         pauseOnFocus: false,  
         accessibility: !inCms,
         drag:          !inCms
      });

      homeSplide.on('pagination:mounted', function ( data ) {
         document.querySelector('#homeSliderControls .pagination').appendChild(data.list);
      });

      let homeSplideControlButton = homeSplide.root.querySelector('.slider-remote');

      homeSplide.on('autoplay:play', function () {
         homeSplideControlButton.classList.remove("paused");
         homeSplideControlButton.classList.add("playing");
         homeSplideControlButton.setAttribute( 'aria-label', 'Pause slider' );
         homeSplideControlButton.querySelector(".action").textContent = 'Pause';
      });

      homeSplide.on('autoplay:pause', function () {
         homeSplideControlButton.classList.remove("playing");
         homeSplideControlButton.classList.add("paused");
         homeSplideControlButton.setAttribute( 'aria-label', 'Play slider' );
         homeSplideControlButton.querySelector(".action").textContent = 'Play';
      });
      
      homeSplide.mount();

      homeSplideControlButton.addEventListener( 'click', function () {
        var autoplay = homeSplide.Components.Autoplay;
        if ( autoplay.isPaused() ) { autoplay.play();
        } else { autoplay.pause(); }
      } );
   }