Как сделать слайдер в ZeroBlock из блока TE800 в 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() {
    (function() {
        setTimeout(function() {

            const allElements = document.querySelectorAll('[class*="slider-html"]');
            
            allElements.forEach((element, index) => {
                const elementClass = Array.from(element.classList)
                    .find(cls => cls.startsWith('slider-html'));
                if (elementClass) {
                    const targetElement = element.querySelector('.tn-atom');
                    if (targetElement) {
                        targetElement.innerHTML = '';
                        const donorNumber = elementClass.replace('slider-html', '');
                        const donorSelector = donorNumber ? 
                            `.uc-donor-slider${donorNumber}` : 
                            '.uc-donor-slider';
                        if (document.querySelector(donorSelector)) {
                            createSlider(targetElement, donorSelector, element);
                        }
                    }
                }
            });
            
            function stabilizeHeight(artboard) {
                if (artboard && artboard.getAttribute('data-artboard-heightmode') === 'hug') {
                    if (typeof t396__updateAutoHeight === 'function') {
                        setTimeout(() => {
                            t396__updateAutoHeight(artboard);
                        }, 100);
                    } else {
                        console.warn('Функция t396__updateAutoHeight не найдена');
                    }
                }
            }
            
            function createSlider(targetElement, donorSelector, parentElement) {
                const sliderContainer = document.createElement('div');
                sliderContainer.className = 'swiper t-text';
                sliderContainer.innerHTML = `
                    <div class="swiper-wrapper"></div>
                `;

                targetElement.appendChild(sliderContainer);

                const donorSlider = document.querySelector(donorSelector);
                const swiperWrapper = sliderContainer.querySelector('.swiper-wrapper');
                
                if (donorSlider && swiperWrapper) {
                    
                    const totalSlides = +donorSlider.querySelector('.t-slds__items-wrapper').getAttribute('data-slider-totalslides');
                    
                    let newSlide = '';
                    
                    for (let i = 1; i <= totalSlides; i++) {
                        
                        const slideElem = donorSlider.querySelector('.t-slds__item[data-slide-index="' + i + '"]');
                        
                        if (slideElem) {
                            const slideImage = slideElem.querySelector('.t923__bgimg')?.getAttribute('data-original') || '';
                            const slideTitle = slideElem.querySelector('.t-card__link')?.innerText || '';
                            const slideBtnLink = slideElem.querySelector('.t-card__link')?.getAttribute('href') || '#';
                            const slideBtnCaption = slideElem.querySelector('.t-card__btn span')?.innerText || '';
                            
                            newSlide += `
                                <div class="swiper-slide">
                                    <a class="cards-grid-slider__link" href="${slideBtnLink}">
                                        <div class="cards-grid-slider__img" data-img-link="${slideImage}" style="background-image: url(${slideImage})"></div>
                                        <div class="cards-grid-slider__content">
                                            <div class="cards-grid-slider__title">${slideTitle}</div>
                                            <div class="cards-grid-slider__line"></div>
                                            <div class="cards-grid-slider__button">${slideBtnCaption}</div>
                                        </div>
                                    </a>
                                </div>
                            `;
                        }
                    }
                    
                    swiperWrapper.innerHTML = newSlide;

                    const tRecBlock = parentElement.closest('.t-rec');
                    
              
                    function stabilizeArtboardHeight() {
                        const artboard = parentElement.closest('.t396__artboard');
                        if (artboard) {
                            stabilizeHeight(artboard);
                        }
                    }
                    
                    if (tRecBlock) {
                        const nextArrow = tRecBlock.querySelector('.right-arrow');
                        const prevArrow = tRecBlock.querySelector('.left-arrow');
                        
                        if (nextArrow && prevArrow) {
                            if (typeof Swiper !== 'undefined') {
                                const swiper = new Swiper(sliderContainer, {
                                    slidesPerView: 1,
                                    spaceBetween: 10,
                                    loop: true,
                                    
                                    autoplay: {
                                        delay: 3000, 
                                        disableOnInteraction: false, 
                                        pauseOnMouseEnter: true, 
                                        waitForTransition: true, 
                                    },
                                    
                                    speed: 800,
                                    effect: 'slide',
                                    
                                    navigation: {
                                        nextEl: nextArrow,
                                        prevEl: prevArrow,
                                    },
                                    
                                    breakpoints: {
                                        640: {
                                            slidesPerView: 2,
                                            spaceBetween: 20,
                                        },
                                        1200: {
                                            slidesPerView: 4,
                                            spaceBetween: 20,
                                        },
                                    },
                                    
                                    on: {
                                        init: function() {
                                           
                                            stabilizeArtboardHeight();
                                        },
                                        resize: function() {
                                            stabilizeArtboardHeight();
                                        },
                                        imagesReady: function() {
                                            stabilizeArtboardHeight();
                                        }
                                    }
                                });
                                
                               
                                swiper.on('slideChangeTransitionEnd', function() {
                                    stabilizeArtboardHeight();
                                });
                                
                            } else {
                                console.error('Swiper не загружен!');
                            }
                        } else {
                            console.log('Стрелки не найдены в блоке');
                            const arrowsContainer = document.createElement('div');
                            arrowsContainer.innerHTML = `
                                <div class="right-arrow"></div>
                                <div class="left-arrow"></div>
                            `;
                            targetElement.appendChild(arrowsContainer);
     
                            if (typeof Swiper !== 'undefined') {
                                const swiper = new Swiper(sliderContainer, {
                                    slidesPerView: 2,
                                    spaceBetween: 10,
                                    loop: false,
                                    
                                    navigation: {
                                        nextEl: targetElement.querySelector('.right-arrow'),
                                        prevEl: targetElement.querySelector('.left-arrow'),
                                    },
                                    
                                    breakpoints: {
                                        640: {
                                            slidesPerView: 2,
                                            spaceBetween: 20,
                                        },
                                        1200: {
                                            slidesPerView: 4,
                                            spaceBetween: 20,
                                        },
                                    },
                                    
                                    on: {
                                        init: function() {
                                            stabilizeArtboardHeight();
                                        },
                                        resize: function() {
                                            stabilizeArtboardHeight();
                                        },
                                        imagesReady: function() {
                                            stabilizeArtboardHeight();
                                        }
                                    }
                                });
                                
                                swiper.on('slideChangeTransitionEnd', function() {
                                    stabilizeArtboardHeight();
                                });
                            }
                        }
                    }
          
                    setTimeout(stabilizeArtboardHeight, 200);
                    
                    const observer = new MutationObserver(function(mutations) {
                        stabilizeArtboardHeight();
                    });
                    
                    observer.observe(sliderContainer, {
                        childList: true,
                        subtree: true,
                        attributes: true,
                        characterData: true
                    });
                    
                }
            }
            
        }, 300);
    })();
});
</script>



<style>
/* Скрываем донорские слайдеры */
[class*="uc-donor-slider"] {
    display: none;
}

[class*="slider-html"] .tn-atom__html,
.swiper {
    width: inherit;
    height: inherit;
}

[class*="slider-html"] {
    display: flex !important;
    height: auto !important;
}


a.cards-grid-slider__link {
    display: block;
    height: inherit;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.cards-grid-slider__img {
    aspect-ratio: 1;
    transition: all 1s ease-in-out;
    background-position: center;
    transform: scale(1);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
}

.cards-grid-slider__content {
    position: relative;
    z-index: 20;
    color: #fff;
    padding-top: 10px;
}

.cards-grid-slider__title {
    font-size: 16px;
    font-weight: 600;
}

.cards-grid-slider__button {
    display: none;
}

.cards-grid-slider__line {
    display: none;
}

[class*="left-arrow"] .tn-atom,
[class*="right-arrow"] .tn-atom {
    cursor: pointer;
    transition: all 0.3s;
}

[class*="left-arrow"] .tn-atom:hover,
[class*="right-arrow"] .tn-atom:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

/* Состояние disabled для стрелок */
.swiper-button-disabled {
    opacity: 0.3 !important;
    pointer-events: none;
    cursor: default;
}

[class*="slider-html"]  img.img-fluid {
    width: 100%;
}

@media screen and (max-width: 640px) {
    .swiper {
        overflow: visible;
    }
}

@media screen and (max-width: 640px) {
    .cards-grid-slider__title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;
    }
    
    .cards-grid-slider__line {
        /*display: block;*/
        background-color: #fff;
        height: 1px;
        margin-bottom: 10px;
    }
    
    .cards-grid-slider__button {
        /*display: block;*/
        font-size: 12px;
    }
    
    .cards-grid-slider__content {
        padding-top: 5px;
        font-size: 14px;
    }
    

    #allrecords span.swiper-pagination-bullet {
        width: 20px;
        margin-left: 2px;
        margin-right: 2px;
        padding: 4px 0;
    }
    
    #allrecords span.swiper-pagination-bullet.swiper-pagination-bullet-active {
        transform: scale(1);
    }
    
    #allrecords .swiper-pagination {
        text-align: center;
        width: calc(100vw - 110px) !important;
    }
}

@media screen and (max-width: 480px) {
    .cards-grid-slider__button {
        font-size: 10px;
    }
}
</style>