Can show how to do this http://slider-tab.webflow.io/

Design help General
1

Can show how to do this

http://slider-tab.webflow.io/

1 Like
2

Hi @Deepak,
Are you asking how to do this or would want to share how to do this?

3

I need tutorial how to do this slider in tabs

4

need to know how to do this

5

It is a super clever and just looks like restyling the webflow slider dots (custom CSS code?). I haven’t seen it done as seamlessly and simply before as most have been JavaScript driven with external buttons. Kudos to whoever came up with it - very nice implementation!

Where did you come across this @Deepak ? It would be worth asking the original author.

Would love to know how to do this myself. It would be a great extension of the slider or tabs component to have relative navigation and the transition options in one component.

6

Ekaterina is the original author:
https://webflow.com/website/A-tab-menu-with-arrows-control
ekatxt @Eka has made the site available for cloning (thanks!)

I took me a bit to see the simplicity even after looking at the clonable file as the clone was not working.

  1. Ekaterina placed pseudo / fake tab buttons on each slide and everything is slight of hand allowing you to create and edit everything simply without any custom code. The resulting file is relatively simple to edit and add slides.

  2. She modified the size and position of the standard slider dots to be huge and hid overflow (no scroll) on the parent container to mask and limit their click area to the height of the bar containing them.

  3. She positioned the replicated fake buttons on each slide aligned with each dot and highlight the appropriate selected color accordingly. (the selected color on the tabs are the same on each slide in the clone, so you will need to alter their selected states using the tabs sub class).

  4. The slider dots are overlaying the fake tab buttons, but their opacity is dialed back to zero, which allows the dots to remain clickable without them showing. . NOTE: this is the bug in the clone - currently the slider nav at the bottom of the slider list in the Navigator is accidentally set to Display : Hidden, which breaks their click function. Select it in the bottom of the slider in the Navigator list and change it to Display : Block and everything should work.

Change the content on each slide to be unique. Currently all pseudo buttons and slide content are the same on each slide which makes you think it is not working even though the arrows do transition between slides and the slider nav dots will work once visibility is set back to Display : Block.

And change the slider transition back to crossfade (currently set to slide).

To do any further editing to the pseudo tab buttons you will need to toggle the slider navigation dots back to hidden to select and edit the elements below.

7

Hi, @Deepak I recorded the video as it is done
https://cloud.mail.ru/public/53ZxZUf93U8J/slide-nav.avi

2 Likes
8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.