White Arrow icon
Back to all Elements

Auto change tabs

A script to automatically switch between tabs in a loop.

As before, this element need 2 steps:

1. Add the next script tot the relevant page, where your tabs are.

<script>

 var Webflow = Webflow || [];

 Webflow.push(function() {

   var tabTimeout;

   clearTimeout(tabTimeout);

   tabLoop();

   function tabLoop() {

     tabTimeout = setTimeout(function() {

       var $next = $('.tabs-menu').children('.w--current:first').next();

       if ($next.length) {

         $next.click();

       } else {

         $('.tab-link:first').click();

       }

     }, 3000);

   }

   $('.tab-link').click(function() {

     clearTimeout(tabTimeout);

     tabLoop();

   });

 });

</script>

Copy

2. Adjust classnames to match. You can change the classnames in the script or the classnames of the elements in your page:

  • 'tabs-menu' is the classname of the wrapping menu links element (the one that says 'Tabs Menu').
  • 'tab-link' is the classname of the actual links to the tabs.

* You can change the timing between each tab, now set to 3000ms (3 sec.) by changing the number 3000 to any other milliseconds number.

** The last part of this script is a function that resets the "timer" when a 'tab-link' is clicked.

Preview:

browser mockup
Share:
Heart icon

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:

Auto get Current Year

Cloneable
Code
JavaScript

Automatically insert the current year to any element with the class of 'year'

Read more
Blue arrow iconWhite Arrow icon

Scroll Menu to Current Link

Cloneable
CMS
Code

Using JS to scroll a div (menu) to the current link inside.

Read more
Blue arrow iconWhite Arrow icon

Background Video with Audio (using plyr.js)

Cloneable
Code
JavaScript

An embed video with Mute/UnMute button using plyr.js plugin.

Read more
Blue arrow iconWhite Arrow icon