How to create a slider with tab menu

Design help General
1

I have searched the forums but cannot find a solution.
I want to make a tab menu for my slider and when you click a tab it should go to the related slide.

Preview image
http://cl.ly/image/0l280f0Z1j2c

How can i code js todo this, because it is not yet inside webflow i think.

2

Hi, Webflow does not yet support this, but the functionality to link to certain slides is in the works. You can read more about this at the following topic:

I hope that helps, sorry you will have to wait a bit longer but this kind of functionality will be introduced coming soon.

3

That is what i need, but there is no code shared.
I have already made link buttons, only need to find the javascript code to move to the correct slide in the slider.

But don’t know how.

4

Ok in that post, there is some discussion on some alternatives for you to check out, since we do not have click actions to move to specific slides in slider yet. Those alternatives or possible options may not work for you. As this kind of new functionality is updated to the tool it will be announced in the forums.

Also there are people good with Javascript that do freelance work, you can check out the Freelancer category of the forum, and maybe someone there can help you with a custom solution.

5

Thanks, i understood the trigger part and now looking inside the webflow.js to see which on event i have to trigger to make my slider move.

6

There are clicks for specific slides in a way - it seems like if Webflow just exposed the css formatting for the slide “dots” that you can click to pick a slide, in the way that the < and > buttons are exposed, it would be a pretty trivial css task to format them into tabs.

I’ve been meaning to make the request to expose formatting for those for some time.

7

Ah, so you mean if you can trigger a click on those buttons you can enable the trigger.
Or do all the css word offcourse.

Thanks for the tip, will look into it.

8

For those who want to know how to make buttons trigger animations to specific sliders see the below code.

This works for 6 slides, it connects the button to the dot of the same slide and fakes a click on it to activate the slider to move.

// Tabs for the slider home
$( ".btn-slider:nth-child(1)" ).click(function(e) {
  e.preventDefault();
  $( ".w-slider-dot:nth-child(1)" ).trigger( "click" );
});
$( ".btn-slider:nth-child(2)" ).click(function(e) {
  e.preventDefault();
  $( ".w-slider-dot:nth-child(2)" ).trigger( "click" );
});
$( ".btn-slider:nth-child(3)" ).click(function(e) {
  e.preventDefault();
  $( ".w-slider-dot:nth-child(3)" ).trigger( "click" );
});
$( ".btn-slider:nth-child(4)" ).click(function(e) {
  e.preventDefault();
  $( ".w-slider-dot:nth-child(4)" ).trigger( "click" );
});
$( ".btn-slider:nth-child(5)" ).click(function(e) {
  e.preventDefault();
  $( ".w-slider-dot:nth-child(5)" ).trigger( "click" );
});
$( ".btn-slider:nth-child(6)" ).click(function(e) {
  e.preventDefault();
  $( ".w-slider-dot:nth-child(6)" ).trigger( "click" );
});

You can also do this with the next and previous buttons

// Next button for the slider
$( ".btn-slider-next" ).click(function(e) {
  e.preventDefault();
  $( ".w-slider-arrow-right" ).trigger( "click" );
});
// Next button for the slider
$( ".btn-slider-prev" ).click(function(e) {
  e.preventDefault();
  $( ".w-slider-arrow-left" ).trigger( "click" );
});

If you want the tabs to only work with specific sliders then add the slider class or id to the selector.

// Tabs for the specific slider examples
$( ".link-tab:nth-child(1)" ).click(function(e) {
  e.preventDefault();
  $( ".slider-examples .w-slider-dot:nth-child(1)" ).trigger( "click" );
});
  • update: prevent link (a) buttons for triggering a jump to top with e.prevenDefault();
4 Likes
9

A Tabs widget (similar to sliders, but with customizable tab links) is coming this week so you’ll be able to build this natively inside Webflow without coding.

2 Likes
10

Great news, thanks for sharing.

11

Was this implemented? If so, how can I access it?

1 Like