Autoplay Tabs - need help by changing the code

Hello Webflowers !

I am using a custom code to autoplay my tabs on the website. My problem is I have 2 different tab section so I use the same code twice with different classes which may acquire a problem because second tab section runs the code somehow twice and clicks it twice as you can see on the preview page.

Is there anyway to combine those scripts together so it can work without any problem ? thanks !

 <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();
        }
    }, 3000);  // 3 second tab loop
}

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

https://jin-design-2.webflow.io

//preview./preview/jin-design-2?utm_medium=preview_link&utm_source=designer&utm_content=jin-design-2&preview=8cea1d4a96e062f2550cdf2c5cf5d775&mode=preview

1 Like