Streaming live at 10am (PST)

How to make navlink behave as slider

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 :slight_smile:

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

sorry for that

https://preview.webflow.com/preview/kicks-fresh-project-0e5831?utm_medium=preview_link&utm_source=designer&utm_content=kicks-fresh-project-0e5831&preview=f770ceefbba97bc89a41499b3a1bdb44&mode=preview

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.

1 Like

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