Hello Webflow world,
I did clone a website totally too much complicated for me and now im struggle with my navlink.
Here’s my read only
https://kicks-fresh-project-0e5831.webflow.io/
I would like to make my navlink behave as the slider just behind it. For example, if I click on social media, users ll be redirect on the social media slider.
Do u have any idea how to do it?
thanks all
Hi there,
In order to get an idea of what you should do, we will need to see a preview link as well.
1 Like
Do you have every slide in there that you will be using? That will require some custom code best that I can tell.
1 Like
yes everyslide are in there
Okay, there is a couple of steps.
First:
Go through your nav items that you want to use to control the slides, and in order give them an id. Start with heroslide1
, then heroslide2
and so on until you reach heroslide6
which should be on the 'Coming Soon'
link.
Second:
Open your page settings for the home page, on the page settings tab that opens scroll to the bottom where your custom code boxes are. You’re going to add two scripts.
First loads JQuery:
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
Then this
<script>
$('#heroslide1').click((e)=> {
e.preventDefault();
$('.hero-link').removeClass('active');
$(this).addClass('active');
$('.w-round div:nth-child(1)').trigger('tap');
});
$('#heroslide2').click((e)=> {
e.preventDefault();
$('.hero-link').removeClass('active');
$(this).addClass('active');
$('.w-round div:nth-child(2)').trigger('tap');
});
$('#heroslide3').click((e)=> {
e.preventDefault();
$('.hero-link').removeClass('active');
$(this).addClass('active');
$('.w-round div:nth-child(3)').trigger('tap');
});
$('#heroslide4').click((e)=> {
e.preventDefault();
$('.hero-link').removeClass('active');
$(this).addClass('active');
$('.w-round div:nth-child(4)').trigger('tap');
});
$('#heroslide5').click((e)=> {
e.preventDefault();
$('.hero-link').removeClass('active');
$(this).addClass('active');
$('.w-round div:nth-child(5)').trigger('tap');
});
$('#heroslide6').click((e)=> {
e.preventDefault();
$('.hero-link').removeClass('active');
$(this).addClass('active');
$('.w-round div:nth-child(5)').trigger('tap');
});
</script>
That should work. Let me know if it doesn’t.
Some credit has to go to someone else in our community but I can’t remember their name, a while ago I found a solution they made years back and it filled in the blanks for me.
2 Likes
Wow seriously sir you are amazing! It work perfectly! Thank you so much for your help and the community member who find the solution
1 Like