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)
*/