How to Add Prev/Next Buttons to Tab Component

This is a Webflow Tabs Component with Navigation (Prev/Next) buttons:

Tab 1
Tab 2
Tab 3
<< PrevNext >>

Method

Step 1:

Add a new div tab-wrapper, give it a position of relative and display of inline-block, and drag your tabs component inside it.

Step 2:

Add two buttons or two block links with class tab-prev and tab-next, give both a position of absolute, and position them anywhere inside the wrapper. I gave both a top of 50% to vertically align middle. You can style them however you want.

Step 3:

Go to the current page settings on the left toolbar. Under the Custom Code section in "Before </body> tag", paste this JavaScript code. You can also paste this code in an embed component.

<script>
// On page ready
var Webflow = Webflow || [];
Webflow.push(function() {

  // For any tab-prev and tab-next clicks
  $('.tab-wrapper').on('click', '.tab-prev, .tab-next', function() {

    // Get direction
    var direction = $(this).hasClass('tab-prev') ? -1 : 1;

    // Get the tab links
    var tablinks = $(this).parent().find('.w-tab-menu');

    // Get index of current tab link, add direction
    var index = tablinks.find('.w--current').index() + direction;

    // If array out of bounds, click on the first
    index = index >= tablinks.children().length ? 0 : index;

    // Update tabs by triggering a "tap" event on the corresponding slide button
    tablinks.find('.w-tab-link').eq(index).trigger('click');

  }); // End click handler

}); // End ready function
</script>

Step 4:

Publish your site and preview it in the sub-domain (this doesn't work in the editor's Toggle Preview).

Notes: