Streaming live at 10am (PST)

AutoPlay Tabs - Any ideas?

thanks, but this code doesn’t work and tabs start autoplay immediately when the website is loaded anyways. it could be because I using the fullpage.js custom code

Did you change name of classes and Id according to your website.
Can you send me read-only and live link?

Thanks,
Dilshad

Yes, I changed. I also noticed that sometime you use taB and sometimes taP. Is this a mistake or you you have two different classes?

Could you please send me the read-only link to your project so I could compare everything? or Mayne make your project cloneable?

Yes that by mistake but these are name of my classes.
Here is live link:
https://autocomplete-search.webflow.io/taps

Here is the read-only link:
https://preview.webflow.com/preview/autocomplete-search?utm_medium=preview_link&utm_source=designer&utm_content=autocomplete-search&preview=bd8a0f65f85ed74c795cda068e795dfd&pageId=608d8032297f8d6a44aff73a&mode=preview

1 Like

in this script…only one tab change… it’s stop on second tab, not go for third tab…
will you help for it?

<script>
    var Webflow = Webflow || [];
    Webflow.push(function () {
      // DOMready has fired
      // May now use jQuery and Webflow api

	// start everything
      var tabTimeout;
      clearTimeout(tabTimeout);
      

    // 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 {
                $('.tap-link:first').click();
            }
        }, 5000);  // 5 second tab loop
    }
			
      
    const el = document.querySelector('#tab-section') // Tab section when in viewport will start looping tabs
	const observer = new window.IntersectionObserver(([entry]) => {
			if (entry.isIntersecting) { //when Tap section start entering viewport.
					tabLoop();
					// reset timeout if a tab is clicked
   					$('.tap-link').click(function() {
   							clearTimeout(tabTimeout);
        					tabLoop();
        			});
					
                    return
          
			}
         	else{
					//when outside of viewport
					clearTimeout(tabTimeout);
			}

				
		
	}, {root: null,threshold: 0})

	observer.observe(el) 
      
      
    
    });
    
    
    
    
</script>

Hi there! It happened to me too and then I realized that when creating the tabs on webflow it automatically assigned these tabs names: tab-link [tab1], tab-link [tab2], tab-link [tab3] to each tab link class. So basically I removed these classes and I kept only tab-link as a name of class for all the tab links and it worked.

Ypu can check if it what happened to you :slight_smile:

Hello!! So, I implemented the code and it works fine for me. However, I would like that when the user intentionally clicks on a tab, the whole loop stops so basically the tab stop changing.

I tried to customize the code but my skills are very limited. Any help? :stuck_out_tongue:

Thanks!!