Back to all Elements

Auto Change Tabs 2.0

A new and improved version for a Tabs element that automatically change tabs

The exact same code from Auto Change Tabs is used here (with some annotations):

<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();
               }
           }, 8000);
       }

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

Copy

In this version I added an interaction that created an indicator when the tab is going to change.

Preview:

Michael's Vsauce was my gateway Youtube channel to the world of fun educational vlogs. This was the 1st video I stumbled upon.

Might also interest you:

Hover to reveal Mask

Cloneable
Code
Design

A fixed background image that is revealed by mouse hover all over the section

Read more

Changing Text

Interactions
Cloneable
Tricks

Change text in a sentence/headline with Webflow's interactions

Read more

Tabs with scrollable (sideways) Menu

Cloneable
Code
Design

A Webflow Tabs widget with some edits and custom code to make the menu scrollable on desktop & mobile

Read more