Auto Tabs Component; Loop not stopping after click

Finsweet Components
1

The Auto Tabs component continues to loop through tabs after I click on a tab, despite having the “Stop on Click” setting enabled in the component configuration. I’ve also attempted a JavaScript workaround using the fsComponents callback API to force disableOnInteraction = true and manually stop autoplay on click, but this didn’t resolve the issue either.

I had the same issue on another website. Anyone know what’s the issue here?

Thanks for the help.

2

@hello72

Looking at your Auto Tabs component setup, we’ve identified the issue. You have multiple content items with the is-content-active class, which is likely causing conflicts with the component’s behavior.

The “Stop on Click” feature or disableOnInteraction option you’re trying to use isn’t actually part of the Auto Tabs component’s native functionality. That’s why neither your component configuration nor the fsComponents callback approach has worked.

Here’s a custom JavaScript solution that should stop the auto-rotation when users click a tab:

window.fsComponents = window.fsComponents || [];
window.fsComponents.push([
  'tabs',
  (tabsInstances) => {
    tabsInstances.forEach((tabsInstance) => {
      const tabNavs = tabsInstance.element.querySelectorAll('[fs-tabs-element="nav-item"]');
      
      tabNavs.forEach((nav) => {
        nav.addEventListener('click', () => {
          if (tabsInstance.autoPlay) {
            tabsInstance.autoPlay.stop();
          }
          clearInterval(tabsInstance.timer);
          clearTimeout(tabsInstance.timer);
        });
      });
    });
  },
]);

:flexed_biceps: A simpler approach might be to use Webflow’s native interactions instead. You could create an interaction triggered by tab clicks that pauses the auto-switching behavior.

Your vertical layout with fs-tabs-layoutdirection="vertical" and fs-tabs-instance="fs-tabs-3" looks correct, but you’ll need to clean up those multiple active states.

For a more robust custom solution, @Support-Luis or @Support-Pedro can help you further.