Código JavaScript (JS) p/ Controlar Slide do JetEngine c/ Widget Listing (Simulando Clique)

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Elementos dos botões à direita
        const buttons = document.querySelectorAll('.button-class'); // Substitua '.button-class' pela classe real dos botões
    
        // Elementos dos tooltips
        const tooltips = document.querySelectorAll('.tooltip'); // Substitua '.tooltip' pela classe real dos tooltips
    
        // Função para atualizar o botão ativo
        function updateActiveButton(button) {
            // Remover a classe ativa de todos os botões
            buttons.forEach(btn => btn.classList.remove('active-button'));
            // Adicionar a classe ativa ao botão clicado
            button.classList.add('active-button');
        }
    
        // Função para ocultar todos os tooltips
        function hideTooltips() {
            tooltips.forEach(tooltip => {
                tooltip.classList.add('hidden');
                setTimeout(() => {
                    tooltip.style.display = 'none';
                }, 500); // Tempo da transição de fade out dos tooltips
            });
        }
    
        // Função para simular clique em outro botão
        function simulateButtonClick(nthChild) {
            // Seleciona o elemento com a classe especificada e o nth-child dinâmico
            var selector = `.jet-slick-dots li:nth-child(${nthChild})`;
            var button = document.querySelector(selector);
    
            // Verifica se o elemento foi encontrado
            if (button) {
                // Simula um clique no botão
                button.click();
            } else {
                console.error(`Elemento com o seletor '${selector}' não encontrado.`);
            }
        }
    
        // Inicializa com o conteúdo do primeiro botão visível
        updateActiveButton(document.getElementById('button1')); // Inicializa o primeiro botão como ativo
    
        // Adiciona evento de clique a todos os botões
        buttons.forEach(button => {
            button.addEventListener('click', function() {
                const buttonId = this.id; // Assuma que cada botão tem um id único correspondente (button1, button2, etc.)
                const buttonNumber = buttonId.replace('button', ''); // Extrai o número do ID do botão (ex: '1' de 'button1')
                const contentId = `content${buttonNumber}`;
                updateActiveButton(this);
                hideTooltips();
                simulateButtonClick(buttonNumber); // Chama a função passando o número do botão
            });
        });
    
        // Evento para capturar mudança de slide
      	// ATUALIZE O VALOR DO ID
        jQuery('#ID_PERSONALIZADO_DO_SLIDE .jet-listing-grid__slider').on('afterChange', function(event, slick, currentSlide) {
            const activeSlideIndex = currentSlide + 1; // Índices dos slides começam em 0, então somamos 1
            const activeButton = document.getElementById(`button${activeSlideIndex}`);
            updateActiveButton(activeButton);
            hideTooltips();
        });
    
    });
</script>

<!-- CSS ADICIONAL OPCIONAL -->
<style>
.button-class {
    cursor: pointer !important;
}

.button-class.active-button,
.button-class:hover,
.button-class:focus {
    background-color: #001726 !important;
    transition: all linear 0.2s;
}

.button-class.active-button p,
.button-class:hover p,
.button-class:focus p {
    color: #EDEDED !important;
    transition: all linear 0.2s;
}
</style>
<!-- CSS ADICIONAL OPCIONAL -->