Streaming live at 10am (PST)

AutoPlay Tabs - Any ideas?


#1

Tried a few work-arounds for automating the ‘tabs’ scrolling through the available content but nothing working available. Any ideas how to get the ‘tabs’ cycling through at a predetermined time?

Thanks in advance


How to Add Prev/Next Buttons to Tab Component
#2

Why not using a slider instead?


#3

You can do this for tabs but custom code is required. I suggest trying out the suggestion above first, otherwise you can contact me.


#4

Yes tried using the slider but this didn’t work as i’d liked.


#5

Hi Jason,

Reading another post in the forum with a similar question (https://forum.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