Have a slider in website header that uses JavaScript and Jquery to change its tabs every 6 seconds or when the user clicks one of its tabs. I use it in my project in Webflow (a page builder) and the problem I face is that whenever slide changes, currently focused form window loses focus.

I'm no programmer even though I'm learning js now, but if after some investigation I think that the .w--current class is used both for slider and form focus in Webflow's master js file.

Here is my live project: https://bauserwis-com-pl.webflow.io/

I found some solutions that use IntersectionObserver API to tell if the header is in viewport and stop the setInterval timer, but I struggle with integrating it with my code. Or perhaps is there a different solution? I don't mind slides changing in the background, I only want to stop the form from losing focus.

Thanks in advance.

var tabTimeout;
clearTimeout(tabTimeout);
tabLoop();
    
// Cycle through all tabs.
function tabLoop() {
    tabTimeout = setTimeout(function() {
       var $next = $('.tabs-menu').children('.w--current:first').next();
    
       if($next.length) {
           $next.click();  // user click resets timeout
       } else {
           $('.standard-tab:first').click();
       }
    }, 6000);  // 6 second tab loop (change this)
}
    
// Reset loop if a tab is clicked
$('.standard-tab').click(function() {
    clearTimeout(tabTimeout);
       tabLoop();
    });
});