Как создать слайдер из группы элементов в ZeroBlock в Tilda

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {

  const CONFIG = {
    speed: 600,              // Скорость перехода (мс)
    loop: true,              // Зацикливание
    effect: 'slide',      
    slidesPerView: 'auto',
    allowTouchMove: true,    // Свайп мышью/тачем
    grabCursor: true,        // Курсор-рука
    centeredSlides: false,    //Активный слайд по центру
    
    // autoplay: {
    //   delay: 4000,
    //   disableOnInteraction: false,
    // },

    
    breakpoints: {
      0: {     // До 480px (дефолт)
        spaceBetween: 10,
      },
      480: {   // От 480px
        spaceBetween: 10,
      },
      640: {   // От 640px
        spaceBetween: 10,
      },
      960: {   // От 960px
        spaceBetween: 10,
      },
      1200: {  //  От 1200px и выше
        spaceBetween: 10,
      },
    },
  };

  function createSwiperOptions(containerEl, arrowsLeft, arrowsRight) {
    const opts = { ...CONFIG };

    const prevTargets = [], nextTargets = [];
    if (arrowsLeft?.length) arrowsLeft.forEach(el => { if (el) prevTargets.push(el); });
    if (arrowsRight?.length) arrowsRight.forEach(el => { if (el) nextTargets.push(el); });

    if (prevTargets.length || nextTargets.length) {
      opts.navigation = {};
      if (prevTargets.length) opts.navigation.prevEl = prevTargets;
      if (nextTargets.length) opts.navigation.nextEl = nextTargets;
    }

    if (CONFIG.pagination) {
      const pagEl = containerEl.querySelector('.swiper-pagination');
      if (pagEl) {
        opts.pagination = { el: pagEl, clickable: true };
      }
    }

    return opts;
  }

  const slideGroups = document.querySelectorAll('.slide-group');
  if (!slideGroups.length) return;
  if (typeof Swiper === 'undefined') {
    console.warn('[Slider] Swiper library is not loaded.');
    return;
  }

  slideGroups.forEach(function (group) {
    const molecule = group.querySelector('.slide .tn-molecule');
    if (!molecule) return;

    const arrowLeftList  = group.querySelectorAll('.arrow-left');
    const arrowRightList = group.querySelectorAll('.arrow-right');

    molecule.classList.add('swiper');
    const slideElements = molecule.querySelectorAll(':scope > div');
    if (slideElements.length === 0) return;

    slideElements.forEach(el => el.classList.add('swiper-slide'));

    if (!molecule.querySelector(':scope > .swiper-wrapper')) {
      const wrapper = document.createElement('div');
      wrapper.classList.add('swiper-wrapper');
      slideElements.forEach(slide => wrapper.appendChild(slide));
      molecule.appendChild(wrapper);
    }
    
    const swiperOptions = createSwiperOptions(molecule, arrowLeftList, arrowRightList);
        swiperOptions.on = {
          init: function (swiper) {
            const slideEl = molecule.closest('.slide-group');
            if (slideEl) {
              slideEl.classList.add('show-slide');
            }
          }
        };
        new Swiper(molecule, swiperOptions);
      });
});
</script>


<style>
#allrecords .t-rec .slide .swiper-wrapper>div {
    display: block;
}    

.slide .swiper {
    overflow: hidden !important;
}

.arrow-left, .arrow-right {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 10; 
  position: relative;
}

#allrecords .t-rec .slide .swiper-wrapper>div>div {
    width: inherit !important;
}
.slide-group{
    opacity: 0;
}
.slide-group.show-slide{
    transition: opacity 0.3s ease-in-out 0.5s;
    opacity: 1;
}


</style>