Custom Arrows to a Webflow Tabs Component

Custom Arrows to a Webflow Tabs Component

Add this code to the </body> section of the page you want to use it on:

var Webflow = Webflow || [];
Webflow.push(function() {  

$('.tabs-wrapper').on('click', '.tab-prev, .tab-next', function() {
var direction = $(this).hasClass('tab-prev') ? -1 : 1;
var tablinks = $(this).parent().find('.w-tab-menu');
var index = tablinks.find('.w--current').index() + direction;
index = index >= tablinks.children().length ? 0 : index;
tablinks.find('.w-tab-link').eq(index).trigger('click');  });
Download Assets
See an Example Website

Other Code Snippets

Learn How to Turn More Website Traffic into Customers in Just 5 Days

Trusted by hundreds of businesses around the world.

Nice! You're in the loop. Talk soon.
Oops! Something went wrong while submitting the form.