Kadence Repeater in Splide Slider

JavaScript
document.addEventListener('DOMContentLoaded', function () {
  const carousel = document.querySelector('#carousel-id .kt-inside-inner-col');
  if (carousel) {
    // Apply classes and initialize Splide
    carousel.classList.add('kb-splide', 'splide');
    const track = document.querySelector('.splide .wp-block-kadence-repeater');
    track.classList.add('kb-splide', 'splide__track');
    const list = document.querySelector(
      '.splide__track .wp-block-kadence-repeatertemplate'
    );
    list.classList.add('kb-splide', 'splide__list');
    const slide = document.querySelectorAll('.splide__list > li');
    slide.forEach((element) => {
      element.classList.add('kb-splide', 'splide__slide');
    });
    new Splide('#carousel-id .kt-inside-inner-col', {
      type: 'loop',
      perPage: 1,
      gap: '0px',
      focus: 'start',
      arrows: false,
      pagination: true,
      autoHeight: true,
      autoplay: true,
      interval: 7000,
      drag: true,
      pauseOnHover: false,
      updateOnMove: true,
      padding: '0',
    }).mount();
  }
});

#carousel-id = section id.

HTML
<link rel="stylesheet" href="/wp-content/plugins/kadence-blocks-pro/includes/assets/css/kadence-splide.min.css">

<script src="/wp-content/plugins/kadence-blocks-pro/includes/assets/js/splide.min.js"></script>

<script src="/wp-content/plugins/kadence-blocks-pro/includes/assets/js/kb-splide-init.min.js"></script>

Skripts pro Seite nur einmal laden.