How to Automatically Switch Tabs on your Webflow Site

How to Automatically Switch Tabs on your Webflow Site

Memberscripts needed

https://www.memberstack.com/scripts/auto-rotating-tabs

Tutorial

Cloneable

Why/Use Cases –

- Rotate between multiple tabs automatically to create a more dynamic page while also saving space by showing more content within the same space.

This guide will help you configure tabs on your site to automatically rotate based on a timer without simulating a click event.

Automatically switching tabs on a Webflow site

To automatically switch tabs on your Webflow site, we’re going to use MemberScript #111 – Auto Rotating Tabs. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Setting it up

All you need to do is select your tabs menu and add the following attribute to it:

· ms-code-rotate-tabs=”NUMBER OF MILLISECONDS”

The attribute’s value will determine how long each tab displays for before switching to the next one.

Making it work

Now that you’ve got everything configured, all you need to do is add the MemberScript #111 custom code to your page, before the closing body tag.

Keep in mind that if you change the tabs’ default easing method and fade in/out duration in the Webflow side panel, you’ll also need to go into the custom code and replace the default values with the ones you set in Webflow.

Conclusion

That’s everything, you can now go ahead and test your automatically rotating tabs on the live site.

If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.

Our demo can help you configure your tabs to automatically rotate based on a timer.

Button – Get cloneable