How to Add Prev/Next Buttons to Tab Component

Community resources Webflow Tips
1

Today, I present another tutorial on how to add Prev/Next buttons to a Webflow Tab Component, and make it function like a slider.

How to Add Prev/Next Buttons to Tab Component

As per previous tutorial, you are free to clone this project “Webflow Tricks” from my profile, so you can see how it works.

This tutorial was created for

Also, feel free to contact me for further code help and/or customization of third-party plugins

14 Likes
2

@samliew wow, I am grateful for your time. You are a wizard!

3

Very cool Sam!

4

@samliew Does this also work for Dynamic content? I want to put prev/next buttons for the content pages in my blog posts (close to 2000 pages). Thanks!

5

@findyourcraving

That would require and entirely different solution, because now you need to split a long rich text element into several DIVs.

6

Super sweet this @samliew!

7

Thanks Samuel, I attempted to make this work here: OnwardDentals' Initial Dental Practice Assessment

When I first tested this - it worked, but now it’s not working.

Could it be an issue around the naming of “tab-menu”? Or perhaps it’s because I’m not using an inline block?

Please let me know if there is something I can do to fix this.

Thanks.

8

Your tabs are not inside tab-wrapper

9

Hey Samuel,

Unless I am mistaken - they are inside the tab wrapper. Please see the image I’ve attached.

Thanks for your help.

484×858 28.1 KB

10

Yes you are mistaken. The tab component has to be inside, not before like your screenshot.

1 Like
11

I think it’s working now. Thank you very much for your help!

12

Alas, the previous and next tabs are working now, but the submit function seems to have been broken by adding the tab wrapper inside the form :frowning:

13

It’s not broken. The other fields have to be filled in first and be valid as well (email).

14

One of my radio button groups was misnamed on the 2nd answer so it had to be filled out twice. I fixed that and all is well. Again, really appreciate the help.

Thanks.

15

Idea for an improvement:

  • We can let designers use custom attributes to have more control over what button links to the next/prev tab. This way we could design sequential flows with the tabs, and have a separate button inside each tab. This gives more flexibility for design and more creative capabiities. Also it separates the style from action, the trigger button can have any classes you want

  • In the code we could use jQuery traversing to easily find next/prev items on which we trigger click
    Here’s a rough sketch, only showing “next” action

    $(document).on(‘click’, ‘[tabs-nav=“next”]’, function() {
    $(this).closest(‘.tabs-wrapper’).find(‘.w-tab-link.w–current’).next(‘.w-tab-link’).click();
    //here we could add code to loop the tabs or gray out the next button if there are no more tabs
    });

18

Is this forum still open for help? I would like to use this functionality in a Multi Step Form that I am building but I think I am missing something.

chamos-home.webflow.io

19

Look at the person with the answer you found in this conversation; and message them in their profile. In your account there’s a message button on top. Then add @ sign with their name to contact them privately.

20

Hi @samliew

Is there a way to add a counter to this? I would like to create the same slider/tabs like the following website: https://golden-center.com/.

Thanks!
Michael

21

This would be exactly what I’ve spent AGES looking for - a hybrid between the slider and the tabs widget - if it could be set to cycle through the tabs automatically like a slider can be. Is that possible please?

1 Like
22

@michael_lieu Yes it’s possible to add a counter with some custom JavaScript development.