@ConnectCreativeDes Yes it’s possible to autoscroll tabs with some custom JavaScript development. See AutoPlay Tabs - Any ideas?
1 Like
Many thanks, just what I’m after! I’ll give it a try 
Cheers, will have a look into it!
This is an awesome tutorial thank you @samliew for the work.
Any way you can help me implement this but using the arrow keys?
Thank you
Most excellent tutorial, Samliew! Thanks so much for sharing this with us all.
Curious to learn if anyone knows if there is a way to control the animation of the tab content. For example, can we slide the tabs in from left/right/top/bottom, etc.?
I’m hoping to get more of a slideshow effect, since we cannot next slideshows inside of tabs.
Thanks in advance and looking forward to the feedback.
Cheers!
Kai
I love this idea of being able to build sequential workflows. I don’t have any experience writing code and implementing this type of thing yet. Do you know how I could have the previous and next buttons in each tab. Doing this would allow me to exclude the back tab from the first pane and the next button from the last pane.
Thank you!
Hello @parkerwest
Have you tried using pagination?
Thanks for the suggestion! I’m trying to create a sequential checkout process though like the one below.
Firstly just wish to say thank you for sharing this.
Then can I ask, is it possible to place the buttons inside a div and then inside the tab-wrapper, but then add to the script so that the tab-prev and tab-next can still be found on click?
Id like to show the div at the bottom of the wrapper on tablet and mobile so it is found after scrolling down through the tab contents.
Thanks for any advise, this has got me stumped.
jr
Hi there. I have used this and works great. However for dynamic tabs / slideshow it won’t let me hide tab panes that have been set in conditions. Eg: Slide 4 is set. It still shows a white tab pane even though I have it set not to be shown.
I have a tab slide show set up with 5 tabs. Sometimes 3 tabs are used. How do I hide the extra 2 tab panes when not required. Thanks,
Niall
Any advice would be greatly appreciated
@samliew wondering how to edit the code to target the next and previous buttons once they are nested ( they need to be nested in other DIVs in my scenario to position them correctly)
Can you anchor those buttons to the top of the page? My tabs are quite long so the next and previous are at the bottom. I want the next/previous buttons to take the user to the top of the content on the following tab
here’s my link
Yes, set the buttons to fixed.
Hi - I was wondering if I could get some help here. I’m trying to create prev/next buttons in the form of View implication I, II, III
But, I can’t figure out why it’s not working…
Any help would be greatly appreciated!
Did you get this working? Your is idea is much cleaner code and easier to implement
Edit:
I figured it out with an easier implementation:
<script>
var prev = $(".class-of-link-or-button");
var next = $(".class-of-link-or-button");
$(prev).on('click', function() {
$('.w-tab-link.w--current').prev('.w-tab-link').trigger('click');
});
$(next).on('click',function (){
$('.w-tab-link.w--current').next('.w-tab-link').trigger('click');
});
</script>
Thanks for this and I hope this help everyone else who’s looking for an easier implementation on how to get next and previous links/buttons working with tabs.
2 Likes
Hi, thanks a lot for your code.
I added the ability to scroll instead of clicking
<script>
window.addEventListener('wheel', function(event){
if (event.deltaY < 0) {
$('#go-up').trigger('click');
}
else if (event.deltaY > 0) {
$('#go-down').trigger('click');
}
});
</script>
The Task: when scrolling, the section with Tabs sticks to the top of the page, the scroll replaces the Prev/Next buttons, lists all the tabs, and the page scrolls further.
But the tabs change with Infinite Repeat, without stopping at the last Tab.
Is it possible in the code to give a command so that after the last tab the script stops?
I’m not very well versed in JS, can you give a link where you can deal with my problem.
Thanks in advance!
For me it worked but it switches only from first to second tab and then stops. Previous button works fine though.
OP’s solution doesn’t work at all for me 
Hello! I’ve implemented this next & previous buttons and works really well, I’ve also added custom Buttons that change the Tabs successfully.
I’d love for each Tab to ‘auto-click’/highlight the corresponding custom button each time the Next and Previous buttons are clicked i.e Next clicked, button below highlights visa versa. The screenshot below shows custom buttons on the right, along the top is the Tab Menu that will be hidden.
I’ve tried several ways to .addClass(“tab-button-active”) dynamically to my custom buttons but with no luck. Any help would be greatly appreciated!
