Custom Arrows to a Webflow Tabs Component

Simple
Custom Arrows to a Webflow Tabs Component

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

<script>
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');  });
});
</script>
Download Assets
See an Example Website

Other Code Snippets

Ready to learn more?

I've worked with countless businesses around the world. Maybe you'll be next.

Get in Touch