Arrow control for tabs

Design help General
1

So I have a set of tabs here and I want to add some arrow controls so I can slide the tabs, I can slide one row using a transform interaction but obviously I need to be able to slide constantly back and fourth.

I did try merging a slider + tabs but that didn’t work. But I do need a way of getting these arrows to work no matter the amount of tabs.

The page in question is services videos

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

I did not really understand your question and I have the feeling that there are many others like me in the forum who did not understand. Perhaps you could elaborate a little more?

4

I have a set of tabs and I want to be able to slide though all of the tabs using the arrows back and fourth. Currently I am able to slide to the second row, this is using a translate interaction, however, as more tags are added I need to be able to continue sliding back and fourth through all tags.

I have tried a slider + tab combination but that didn’t work out so I’m trying to do this though the tab element alone adding custom arrows.

I have the desired affect, I just need to get the arrows to work like as they would in a slider.

1 Like
5

I’m having the same problem, any solution?

6

Try this script in your before body tag in the page settings (:

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

  $('.tab-wrapper').on('click', '.tab_previous, .tab_next', function() {

    var direction = $(this).hasClass('tab_previous') ? -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>

Add two link blocks and style them as your arrows. Give your ‘next’ arrow the following class: ‘tab_next’

And your ‘previous’ arrow the following class: ‘tab_previous’