AutoPlay Tabs - Any ideas?

Design help General
5

Hi Jason,

Reading another post in the forum with a similar question (https://discourse.webflow.com/t/work-around-to-autoplay-tabs/47807/1) I tried my own twists to the solution and found one that seems to do the job.

Here’s the code I tried and that worked for me :

<script>
    var Webflow = Webflow || [];
    Webflow.push(function () {
      // DOMready has fired
      // May now use jQuery and Webflow api

// start everything
      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();
            }
        }, 5500);  // 5 second tab loop
    }

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

It basically says you have a function that goes through the tab-link class items that are part of your tabs-menu class to make it switch to the next tab every 5500ms and if you click a tab it restarts timer.

You could change the tab-link and tabs-menu classes to the ones you have in your project as well as change the timer (the value in ms at the end of the tabLoop params).

I’m no js expert so maybe it’s not super clean code… but it works :slight_smile: and that’s probably enough !
Hope it helps

14 Likes