Как создать слайдер до/после из блока GL09 в Tilda

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

<style>
.uc-gl-in-line {
    display: none;
}

.uc-gl-in-line .t410__col.t-col {
    max-width: none;
    padding: 0;
    margin: 0;
}

.uc-gl-in-line .t-beforeafter__image.t-beforeafter__image_right {
    right: 1px;
}


.glwrapper {
    position: relative;
    padding: 0 20px;
}

.swiper-slide {
    height: auto;
}

.swiper-slide .uc-gl-in-line {
    display: block;
    width: 100%;
}

.swiper-button-next,
.swiper-button-prev {
    color: #000;
}

.custom-prev,
.custom-next {
    cursor: pointer;
}

.swiper-no-swiping {
    touch-action: auto !important;
}


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


@media screen and (min-width: 960px) {
    .swiper {
        overflow: hidden;
    }
    
    .swiper-slide {
        box-sizing: border-box;
    }
}
</style>

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

<script>
document.addEventListener("DOMContentLoaded", function() {
    (function() {
        const gl09List = document.querySelectorAll('.uc-gl-in-line');
        
        if (gl09List.length === 0) return;

        const firstBlock = gl09List[0];
        const parentContainer = firstBlock.parentNode;
        const nextSibling = firstBlock.nextSibling;

        const glWrapper = document.createElement("div");
        glWrapper.classList.add('glwrapper');
        
        glWrapper.innerHTML = `
            <div class="swiper">
                <div class="swiper-wrapper"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        `;

        const swiperWrapper = glWrapper.querySelector('.swiper-wrapper');

        gl09List.forEach(function(block) {
            const slide = document.createElement('div');
            slide.classList.add('swiper-slide');
            slide.appendChild(block);
            swiperWrapper.appendChild(slide);
        });

        if (nextSibling) {
            parentContainer.insertBefore(glWrapper, nextSibling);
        } else {
            parentContainer.appendChild(glWrapper);
        }

        const swiperElement = glWrapper.querySelector('.swiper');
        const swiper = new Swiper(swiperElement, {
            loop: false,
            slidesPerView: 1,
            spaceBetween: 20,
            grabCursor: true,
            allowTouchMove: true,
            
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            breakpoints: {
                960: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                }
            }
        });

        const customPrev = document.querySelector('.custom-prev');
        const customNext = document.querySelector('.custom-next');

        function updateCustomButtons() {
            if (customPrev) {
                if (swiper.isBeginning) {
                    customPrev.classList.add('swiper-button-disabled');
                } else {
                    customPrev.classList.remove('swiper-button-disabled');
                }
            }

            if (customNext) {
                if (swiper.isEnd) {
                    customNext.classList.add('swiper-button-disabled');
                } else {
                    customNext.classList.remove('swiper-button-disabled');
                }
            }
        }

        if (customPrev && customNext) {
            customPrev.addEventListener('click', function() {
                swiper.slidePrev();
            });

            customNext.addEventListener('click', function() {
                swiper.slideNext();
            });

            swiper.on('slideChange', updateCustomButtons);
            swiper.on('reachBeginning', updateCustomButtons);
            swiper.on('reachEnd', updateCustomButtons);
            swiper.on('fromEdge', updateCustomButtons);
            
            updateCustomButtons();

            const swiperButtons = glWrapper.querySelectorAll('.swiper-button-prev, .swiper-button-next');
            swiperButtons.forEach(function(btn) {
                btn.style.display = 'none';
            });
        }

        let isHandleActive = false;
        let swiperTimeout = null;

        function setSwiperState(active) {
            if (swiperTimeout) {
                clearTimeout(swiperTimeout);
                swiperTimeout = null;
            }
            
            if (!active) {
                swiper.allowTouchMove = false;
                swiperElement.style.touchAction = 'none';
                isHandleActive = true;
            } else {
                swiperTimeout = setTimeout(() => {
                    swiper.allowTouchMove = true;
                    swiperElement.style.touchAction = '';
                    isHandleActive = false;
                }, 300);
            }
        }

        document.addEventListener('mousedown', function(e) {
            if (e.target.closest('.t-beforeafter__handle')) {
                setSwiperState(false);
            }
        }, true);

        document.addEventListener('touchstart', function(e) {
            if (e.target.closest('.t-beforeafter__handle')) {
                setSwiperState(false);
            }
        }, true);

        document.addEventListener('mouseup', function(e) {
            if (e.target.closest('.t-beforeafter__handle') || isHandleActive) {
                setSwiperState(true);
            }
        }, true);

        document.addEventListener('touchend', function(e) {
            if (e.target.closest('.t-beforeafter__handle') || isHandleActive) {
                setSwiperState(true);
            }
        }, true);

        document.addEventListener('mousemove', function(e) {
            const target = e.target.closest('.t-beforeafter__handle');
            if (target && !isHandleActive) {
                setSwiperState(false);
            }
        }, true);

        const style = document.createElement('style');
        style.textContent = `
            .t-beforeafter__handle {
                cursor: ew-resize !important;
                touch-action: none !important;
                z-index: 100 !important;
            }
            .swiper-slide .t-beforeafter {
                touch-action: none !important;
            }
            .custom-prev.swiper-button-disabled,
            .custom-next.swiper-button-disabled {
                opacity: 0.5;
                pointer-events: none;
                cursor: default;
            }
        `;
        document.head.appendChild(style);

        function reinitBeforeAfter() {
            document.querySelectorAll('.uc-gl-in-line').forEach(function(block) {
                const id = block.id;
                if (id) {
                    const numericId = id.replace(/[^0-9]/g, '');
                    if (numericId && typeof t410_init === 'function') {
                        t410_init(numericId);
                    }
                }
            });
        }

        let resizeTimer = null;
        window.addEventListener('resize', function() {
            if (resizeTimer) {
                clearTimeout(resizeTimer);
            }
            resizeTimer = setTimeout(function() {
                reinitBeforeAfter();
                resizeTimer = null;
            }, 500);
        });

        reinitBeforeAfter();

    })();
});

</script>