Как сделать таб меню для управления галереей в ZeroBlock в Tilda

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

        document.querySelector('.gallery-tabs_1')?.classList.add('active-zero-tab');
        
        document.querySelectorAll('div[class*="gallery-tabs_"]').forEach(function(element) {
            element.addEventListener('click', function() {
                const recBlk = this.closest('.t-rec');
                if (!recBlk) return;

                recBlk.querySelectorAll('div[class*="gallery-tabs_"]').forEach(function(tab) {
                    tab.classList.remove('active-zero-tab');
                });
                
                let tabIndex = 0;
                this.classList.add('active-zero-tab');
                const galleryClass = Array.from(element.classList).find(cls => cls.startsWith('gallery-tabs_'));
                
                if (galleryClass) {
                    const match = galleryClass.match(/gallery-tabs_(\d+)/);
                    if (match?.[1]) {
                        tabIndex = match[1];
                    };
                };

                const slideBullet = recBlk.querySelector('.zerogallery div[data-slide-bullet-for="' + tabIndex + '"]');
                if (slideBullet) {
                    slideBullet.click();
                };
            });
        });
        
        function sldchange() {
            const observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    if (mutation.attributeName === "data-slider-pos") {
                        const target = mutation.target;
                        const posSld = target.getAttribute('data-slider-pos');
                        const currentRec = target.closest('.t-rec');
                        
                        if (currentRec) {
                            currentRec.querySelectorAll('div[class*="gallery-tabs_"]').forEach(function(tab) {
                                tab.classList.remove('active-zero-tab');
                            });
                            const activeTab = currentRec.querySelector('.gallery-tabs_' + posSld);
                            if (activeTab) {
                                activeTab.classList.add('active-zero-tab');
                            };
                     
                        };
                    };
                });
            });
            
            document.querySelectorAll(".zerogallery .t-slds__items-wrapper").forEach(function(element) {
                observer.observe(element, {
                    attributes: true
                });
            });
        }
        
        function checksld() {
            if (document.querySelector('.zerogallery .t-slds')) {
                sldchange();
                clearInterval(sldinterval);
            };
        };
        const sldinterval = setInterval(checksld, 200);
 
    })();    
});    
</script>

<style>
.zerogallery .tn-atom__slds-img {
    border-radius: 0 50% 50% 0;
}    
.tn-elem[class*="gallery-tabs_"] {
    cursor: pointer;
    transition:all 0.3s ease-in-out;
}
.active-zero-tab{
    font-weight: 800;
    text-decoration: underline;
    padding-left: 20px;
}
</style>