Work around to AutoPlay Tabs

Design help General
1

Hi Everyone, I have looked through the forums and I haven’t really found a solution for this. I am trying to autoplay through the tabs. I am not using the slider feature because I can not style the buttons as I have it on the sample. Does anyone know of any work arounds for this? Here is a link to see what I have so far. http://nlf-coming-soon-page.webflow.io/#events

2

Unfortunately, this can only be done with custom code. At least to my knowledge anyway as I required the same functionality for my site.

The custom code written for my site is:

 <script>(function() {
var tabTimeout;

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

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

This script is placed inside the custom code section before the close body tag section.

This code essentially looks for the tabs menu element, cycles through all the children elements of this and loops through them every 12 seconds.

This loop is reset every time someone clicks a tab.

This code might work for you if you added the classnames .tab-menu to the tab menu and .tab-link to each tab link inside your tab menu.

Change the at the end from 12500 to something smaller to reduce the time. I have animations inside my tabs so the timeout is set to 12.5s to allow those to finish. Something between 3000 & 5000 might be more appropriate.

Let me know if that works

4 Likes
3

Hi Irishbuckley thanks for the quick response. I have added the custom code and double checked all the classnames to make sure they align and still no luck. Anything I could be missing?

Here is my preview https://preview.webflow.com/preview/nlf-coming-soon-page?preview=ae41170672a684b653c3416985fffcfb

4

You haven’t named the classes properly I’m afraid. You’ve named the tab menu tabsmenu and not tabs-menu.

Equally, you’ve named all but two of the tab links Tab Link and not tab-link. You need to be exact. Rename all tab links to this exact naming convention = tabs-link

From what I can see, you’ve not pasted the script into the custom code section either. Unless you’ve put this in the custom code section on the Webflow dashboard?

5

Thank you again but still no go. I fixed all class names and I switched the custom code from the dashboard to the home settings in designer.

Can I see your working version so i can compare? maybe I did something wrong.

6

Is this site published? There might be a JS error in the console. Without looking at that I can’t be of any more help.

If I’m honest, that custom code was written by one of our developers. I’m just the designer so my coding knowledge, especially JavaScript, is limited.

7

Ok thank you I understand. Here is the published site. http://nlf-coming-soon-page.webflow.io/ If you see anything please let me know.

8

@irishbuckley thanks for your code! I’ve named all conventions properly like this:

Tab Links: tab-link
Tab Menu: tabs-menu

But mine still isn’t working? http://74356-f1.webflow.io
The Tab sldier is under “Hard- & Software” and the client wishes it to be autoplayed.
Anybody has some solutions here?

9

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.