▼
Streaming live at 10am (PST)

How to make navlink behave as slider

Design help Animations & Interactions
#1

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:

#2

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
#3

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

#4

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
#5

yes everyslide are in there

Capture.PNG
Capture.PNG1915×774 255 KB

#6

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
#7

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