Hello. I am desperately trying to achieve something like this website http://www.bunkerwork.com/
I am a newbie so don’t judge! but basically, i would like to have a slider with a costumed slider nav that could pretty much be whatever I want it to be, like titles and stuff instead of the buttons, and that would allow people to change slides when hovering over the button.
Maybe I should use the tab feature?
Anyone has any idea of how i could do that?!
There are many ways you can approach this design in Webflow. There are limitations.
Tabs: they won’t fade one to another automatically, and the fade will be a fade to black/fade from black. No change on hover.
Sliders: they cycle automatically but they won’t fade but slide. No change on hover.
Custom: you can achieve the exact same fade but you’ll need javascript to cycle the slides. You can set the preview on hover. Requires quite some interactions.
Here is my test with tabs:
http://sab.webflow.com/bunkerwork-like-layout
check http://sab.webflow.com for public link and site cloning.
Using a javascript approach with the slider may be a fairly big leap if you are new to webflow, but it would do the trick. (I am working on an almost identical approach to the original inspiration you posted) Tabs may be a simpler approach as @vincent created and is super close.
bartekkustra’s external button script for the slider works for this perfectly for a javascript implementation if you choose to go that route. It can easily be modified to work on hover if you change the .click to .hover for each instance in the js .
I prefer bartekkustra’s javascript method with a slider over using the tabs component because you have more control over transitions and can use the slider crossfade + the option for auto play. I added some personal notes at the bottom of the code that may help speed setup, they are the parameters I struggled with initially in getting everything in order for it to work.
Original post:
What I am using:
/*
------------------------------------------------------------
Working Demo:
http://slider-changer.webflow.com/
Forum - bartekkustra:
http://forum.webflow.com/t/is-it-possible-to-link-to-a-specific-slide-in-a-slider/2099
------------------------------------------------------------
*/
<script>
$(document).ready(function() {
$('#heroslide1').click(function(e) {
e.preventDefault()
$('.hero-link').removeClass('active');
$(this).addClass('active');
$('.w-round div:nth-child(1)').trigger('tap');
});
$('#heroslide2').click(function(e) {
e.preventDefault();
$('.hero-link').removeClass('active');
$(this).addClass('active');
$('.w-round div:nth-child(2)').trigger('tap');
});
$('#heroslide3').click(function(e) {
e.preventDefault();
$('.hero-link').removeClass('active');
$(this).addClass('active');
$('.w-round div:nth-child(3)').trigger('tap');
});
$('#heroslide4').click(function(e) {
e.preventDefault();
$('.hero-link').removeClass('active');
$(this).addClass('active');
$('.w-round div:nth-child(4)').trigger('tap');
});
$('#heroslide5').click(function(e) {
e.preventDefault();
$('.hero-link').removeClass('active');
$(this).addClass('active');
$('.w-round div:nth-child(5)').trigger('tap');
});
});
</script>
/*
PERSONAL NOTES & TIPS:
------------------------------------------------------------
THE BUTTONS
------------------------------------------------------------
<div class="w-col w-col-4 hero-col">
<a class="hero-link" href="#" id="heroslide1">Private Catering</a>
<a class="hero-link" href="#" id="heroslide2">Business Catering</a>
<a class="hero-link" href="#" id="heroslide3">Contract Catering</a>
<a class="hero-link active" href="#" id="heroslide4">Wedding Catering</a>
<a class="hero-link" href="#" id="heroslide5">Seasonal Catering</a>
</div>
------------------------------------------------------------
SLIDER DOTS:
You must have the default dots in the slider. They can be hidden,
but must be present to work.
------------------------------------------------------------
EXTERNAL BUTTONS:
element ID = heroslide3 (iterate the number for each button)
class = .hero-link (do not use the default ".Button class" - you have to delete it
no href link required - leave as default #
------------------------------------------------------------
SLIDER:
element ID = hero-slider
------------------------------------------------------------
HOVER:
To make the buttons work on hover rather than click edit the script for each instance:
$('#heroslide1').click(function(e)
- change to -
$('#heroslide1').hover(function(e)
*/
I like this. Nice.
Without experience… or with limited experience
But… it can be done. JS to control the transitions.
However, I would use a series of DIVs instead of tabs.
Vincent,
What you did there is really nice indeed! Being fairly new to this I think I will try and stay away from JS until my skills get a little better.
Sorry to bother you with that but I was hoping to find your bunker like lay out on your web flow profile to take an in depth look at the transitions and layout you used.
Thank you so much for helping me out so fast!
The JavaScript route does sound like a pretty big leap. I am trying to get into web design all on my own so I am taking slow but steady steps!!
Thank you so much anyway I will for sure come back to this when i feel more ready!
Well my first post was to thank you and ask you for more details but digging in (and using my brain a little) I succeeded in doing what you did! Thank you so much again for responding so quickly and helping get the result I was looking for!
You can! I told you, it’s the My Sandbox website, you can public-link it or clone it. Your example is on the last page.
You can even grab the SVG icon I made for the PLAY button (:
Hi @Amath_Mbaye, I thought it would be fun to try and remake the slider using interactions. I was able to get the hover effect to work pretty nicely, but can’t make the slides automatically change when not hovering. Might be able to do it with custom code though 
Demo: https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb
Page Title: Custom Tabs on Hover
I apologize in advance if I’m way off! 
Which element is the interactions applied to? I can’t seem to find which one in the editor.
@GenKazak, The ct-tabWrapper has the interaction. (see the navigator for heirarchy) Each ct-tabWrapper is the parent and contains ct-tabPane (the full frame image) and uses limit to nested elements so the same “Custom Tabs on Hover” interaction can be applied to all of them. William left the interaction off of the first of the five instances so it would display as the init or default.
@thewonglv - great structure and approach William! Was interesting to poke around and see how you accomplished it. The javascript from @bartekkustra I posted above works great as a scripted version and doesn’t kill auto playback, but it also doesn’t remain paused on hover either.
I would love to one day have simple hooks for the slider to coordinate or be driven by other interactions or external buttons/links ( play / pause / next / back / resume / goToAndPlay or goToAndStop on n slide ). The slider is a very accessible and potentially a tremendously powerful content / dispatch / event handler that would make a world of things possible. With those base hooks exposed and available in IX it would be unstoppable (mild pun intended)
Things it would enable:
Thanks @vlogic! Glad you guys enjoy this stuff, it’s always fun to see what kind of things you can make in Webflow. As for the ideas you have for the slider, don’t forget to share your ideas in the Wish List category http://forum.webflow.com/category/feedback/wish-list
@Amath_Mbaye - I had a quick go at this one too!
Managed to build it solely using Webflow interactions so it’s fully functional without the need for adding scripts etc.
It also works pretty much the same as the bunker site in terms of moving to the next showreel & having a working lightbox for each. Feel free to clone & have a play: https://webflow.com/website/Lightbox-Concept
Just looked at the mobile styling for Bunker though…might be on your own with that one!!
@EvanJones Way Cool! #cloned
*Share this in the Show and Tell category
Great work @EvanJones - cloned as well. Looking forward to playing around with this.
The mobile version would probably be easiest to implement as a whole separate structure and simply swap visibility on devices. The only snag would be horizontal tablets (ipad) which will display the desktop instead. It may be worth adding a click and pressed state to the hover interactions using a simple link box button to accommodate that since hover won’t exist on tablet.
Sorry for the late reply! Was travelling. But thanks man this looks stunning! I can go ahead at join the other people who cloned it. Exactly what I was looking for. Thanks for your help!
@thewonglv - will do! Just going to put some work in on the mobile version & sub pages over the next week, then i’ll be sure to share it 
much appreciated @vlogic, I’m going to take some of your comments onboard & see what I can achieve with regards to tablet & mobile styles. I’ll keep you posted.
@Amath_Mbaye - glad it works for you. I’ll drop you a note once i’ve finished building it in earnest. Shouldn’t take longer than a week, but in the meantime feel free to play with it yourself!