Auto tabs with stop on hover

Design help Custom code
1

Hello guys,

I know this functionality is somewhere in the forums and clonables, but I’ve tried them all and no one seems to work without bugs.

I have now a solution that works great with my design. It is fully working auto switching tabs. The problem is that I would like to make the tabs to stop auto switching when hovered on specific tab. I kind of understand the code, but I’m not fluent in Javascript so it is hard for me to make this functionality myself.

I guess I need just a few more lines of code to make it work properly. Maybe anyone of you can help?

Here is the code I have now:

<script>
    var Webflow = Webflow || [];
    Webflow.push(function() {
        var tabTimeout;
        clearTimeout(tabTimeout);
        tabLoop();

        // define loop - cycle through all tabs
        function tabLoop() {
            tabTimeout = setTimeout(function() {
                var $next = $('.tabs-menu').children('.w--current:first').next();

                if ($next.length) {
                    $next.click(); // click resets timeout, so no need for interval
                } else {
                    $('.tab-link:first').click();
                }
            }, 12000);
        }

        // reset timeout if a tab is clicked
        $('.tab-link').click(function() {
            clearTimeout(tabTimeout);
            tabLoop();
        });
    });
</script>

Here is my site Read-Only: LINK
(how to share your site Read-Only link)