Как создать стрелки переключения табов для блока ME602A в Tilda

<script>

const TAB_SLIDERS_CONFIG = {
    "uc-tab-slider": {
        "arrow-left": "tab-arrow-left", //класс для левой стрелки
        "arrow-right": "tab-arrow-right", //класс для правой стрелки
        "auto": "false",  //автосмена   true/false
        "time_ms": "3000", //автосмена пауза в миллисекундах
        "pause": "true"  //автосмена пауза смены при наведении на контентные блоки
    }
};

(function() {
    class TabSlider {
        constructor(container, settings) {
            this.container = container;
            this.settings = settings;
            this.arrowLeft = null;
            this.arrowRight = null;
            this.auto = settings.auto === 'true';
            this.timeMs = parseInt(settings.time_ms, 10) || 3000;
            this.pause = settings.pause === 'true';
            this.timer = null;
            this.isPaused = false;
            this.observedBlocks = [];
            
            this.init();
        }

        getContainerName() {
            return this.container.className || this.container.id || 'unknown';
        }

        init() {
            this.arrowLeft = document.querySelector(`.${this.settings['arrow-left']}`);
            this.arrowRight = document.querySelector(`.${this.settings['arrow-right']}`);
            
            if (this.arrowLeft) {
                this.arrowLeft.addEventListener('click', (e) => {
                    e.preventDefault();
                    this.switchTab('left');
                    this.arrowLeft.blur();
                });
            }
            
            if (this.arrowRight) {
                this.arrowRight.addEventListener('click', (e) => {
                    e.preventDefault();
                    this.switchTab('right');
                    this.arrowRight.blur();
                });
            }
            
            if (this.auto && this.timeMs > 0) {
                this.startAutoSwitch();
                if (this.pause) {
                    this.setupHoverPause();
                }
            }
        }

        getTabs() {
            const ul = this.container.querySelector('ul');
            return ul ? Array.from(ul.children).filter(child => child.tagName === 'LI') : [];
        }

        getActiveTab(tabs) {
            for (let i = 0; i < tabs.length; i++) {
                const button = tabs[i].querySelector('button[role="tab"]');
                if (button && button.getAttribute('aria-selected') === 'true') {
                    return {
                        tab: tabs[i],
                        index: i,
                        button: button
                    };
                }
            }
            return null;
        }

        switchTab(direction) {
            const tabs = this.getTabs();
            if (tabs.length === 0) return;
            
            const active = this.getActiveTab(tabs);
            let targetIndex = -1;
            
            if (!active) {
                targetIndex = 0;
            } else if (direction === 'right') {
                targetIndex = active.index + 1 >= tabs.length ? 0 : active.index + 1;
            } else if (direction === 'left') {
                targetIndex = active.index - 1 < 0 ? tabs.length - 1 : active.index - 1;
            }
            
            if (targetIndex !== -1) {
                const targetTab = tabs[targetIndex];
                const targetButton = targetTab.querySelector('button[role="tab"]');
                if (targetButton) {
                    targetButton.click();
                    setTimeout(() => {
                        targetButton.blur();
                        if (document.activeElement && document.activeElement.closest('[aria-hidden="true"]')) {
                            document.body.focus();
                        }
                    }, 10);
                }
            }
        }

        startAutoSwitch() {
            if (this.timer) clearInterval(this.timer);
            this.timer = setInterval(() => {
                if (!this.isPaused) {
                    this.switchTab('right');
                }
            }, this.timeMs);
        }

        setupHoverPause() {
            const tabs = this.getTabs();
            const allRecIds = [];
            
            tabs.forEach(tab => {
                const dataAttr = tab.getAttribute('data-tab-rec-ids');
                if (dataAttr) {
                    const ids = dataAttr.split(',').map(id => id.trim());
                    ids.forEach(id => {
                        allRecIds.push(`rec${id}`);
                    });
                }
            });
            
            this.observedBlocks = allRecIds
                .map(id => document.getElementById(id))
                .filter(el => el !== null);
            
            if (this.observedBlocks.length === 0) return;
            
            this.observedBlocks.forEach(block => {
                block.addEventListener('mouseenter', () => {
                    this.isPaused = true;
                });
                block.addEventListener('mouseleave', () => {
                    this.isPaused = false;
                });
            });
        }
    }

    function initTabSliders() {
        for (const [containerClass, settings] of Object.entries(TAB_SLIDERS_CONFIG)) {
            const containers = document.querySelectorAll(`.${containerClass}`);
            containers.forEach(container => {
                new TabSlider(container, settings);
            });
        }
    }
    
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initTabSliders);
    } else {
        initTabSliders();
    }
})();
</script>

<style>

[class*="tab-arrow-left"],
[class*="tab-arrow-right"]
{
    cursor: pointer;
}


div[class*="uc-tab-slider"] {
    height: 0;
    overflow: hidden;
    padding: 0 !important;
    visibility: hidden;
}

</style>