Link to A specific slide inside A Slider

thank you! I was looking for a way as well, so I will try it out!

Hey again!

Finally got as far with the website, that I could test your solution! I realized now though that I cant get it to work…

I have no knowledge of javascript, so maybe I’m doing something horribly wrong?
On my site I also wanna link from a homepage to a different page where the slider is located, maybe that’s a problem?

Here’s my site’s sharelink: Johannes Krause Portfolio(https://preview.webflow.com/preview/johannes-krause-portfolio?utm_source=johannes-krause-portfolio&preview=0ce5cc98a4a65c2ae33981a43a18a095)

I found this code by @bartekkustra but I think this only switches the slides and doesnt move across pages?

<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');
  });
 });
</script>>

Could you kindly elaborate on how to implement the javascript here?

Thanks a lot!

You should undestand the basic concept of JS - variables not saved after move from one page to another… So, how slider will get info of slide it need to show? You should pass variables somehow…

In your case, i think, the best way to do this is to use # hash in links:
https://johannes-krause-portfolio.webflow.io/projects#1 (for example - 1 is the slide number)
On project page you should get variables :

    $(document).ready(function () {
    	if(window.location.hash){
    		 var slideNumber = window.location.hash.substr(1);
                     $('#slider div:nth-child('+slideNumber+')').trigger('tap');
    	}
    });

Its a concept. Im not tested this in practice.

Hello once more!

thanks so much for taking the time to help! And sorry for still coming back here with a problem!

I published the site and tried the code out.

As you can see on the finished site, the links on the homepage now link to the respective slides of the big slider BUT other sliders from the page also open slides on top!

It seems that the code is targetting the slide number of all sliders on the page. I tried giving the project slides specific IDs and putting them behind the “#” in the links, but that only worked with the first project…

Sorry to ask again, but how could I target a specific slider? I couldnt find it online :persevere:

Here’s the share link again too, in case you wanna have a look.

again, thank you for the help!

Could not open site http://www.johanneskrause.com/ at all …
So i cant check this out.
Project Links from johannes-krause-portfolio.webflow.io also lead to http://www.johanneskrause.com/projects#4
i can check after site will be online… Maybe there is somekind DNS problems right now…

Oh no, I see… It works on my end but also not reliably. “whatsmydns” says its reachable but not consistently.

I double checked the DNS provider settings and I’m working through webflow’s troubleshooting FAQ for DNS problems right now. I’ll keep checking if it works 100% and let you know.

Thank you

It should work now, I tested it with different “is the website up” and “is the dns resolved” sites!

Here’s the share link of the current state of the site. Thank you!

You have uniqe structure of nested divs and sliders, so call :
$(‘#slider div:nth-child(1)’).trigger(‘tap’);
selects 57 matches!!! and tgigger event like “click” on each of it. Thats why you see nested slider appear on top.

If you have listeners on slides which switch one slides to active state the working code could look like
$(‘#slider div.the-slide:nth-child(1)’).trigger(‘tap’);
But right now click on your slides doesnt work.

So .trigger(‘tap’) - its a click imitation. What click imitation would bring your slide to active state i didnt find out. Maybe you removed basic functionality of slider…

Create click fuctionality by interaction animation and call it from outside as code described in previous posts.

I made a cloneable project to solve this.
Hope it helps someone, I’ve been looking for a workaround for some time until I got here.
Native Slider with hash for each slide and custom navigation

1 Like

hi Diego. this looks good. I am not sure what the .active class is responsible for. seems like it is just an empty div…

could you please help me to activate this code within my project?

I have 3 slides. in the Slide 2 I have a button that I want to lead to the Slide 3. How should I name elements in my project to make this work?

thank you

Hi @meetingingorkipark Adam,
your link is giving me a 404 error.

The active class is from the Finsweet code. It’s only useful if you are using a custom navigation (dots).

hi Diego.

Sorry, here is the link
https://preview.webflow.com/preview/mauible1-752682a2b077d636dd0dd441217ca2?utm_medium=preview_link&utm_source=designer&utm_content=mauible1-752682a2b077d636dd0dd441217ca2&preview=cd567232a00f3e6c25057ffe877a9acc&mode=preview

Where is the custom code?

hi Diego. Now I have copied the custom code from you project. So in your case .slider-controller is the button outside the slider itself. in my case within the Slider section → Slide 2 - > Aim Section - > Image Holder → gotoslide3

Shared with CloudApp

So in your code I should first replace .slider-controller to .gotoslide3, right. trying to figure out what’s next?

What do you really want?
I mean, if you just want to go to the next slide from another button that is not an arrow, it’s easy.
This is for linking from outside the page you are on.

If you want that, you need to first make the custom navigation so you have a clicable div for each slide.
Then just put an ID/class to each one and follow the code instructions.

Hi Diego, I actually need it to be a button on the second slide that goes to the slide 3. You said it’s easy? How would you achieve this?

Mindblowing! Pretty cool! Do you happen to know if the arrows that come built in with the Webflow slider are able to navigate between the slides while displaying their URLS? Somehow they work, but with the URL of the first slide, only.

Interesting, I don’t have a solution for that because didn’t need that.
A manual approach can be with “link blocks” over the arrows that change in each slide but it’s not a good solution.

Sorry, I don’t have time to make tests and help you more.

1 Like

No worries! Thank you for trying!

Looking for this same solution but it’s not working for me!

When I type the URL with the hash for specific slides it only autoscrolls to the slider section - not to the individual slides. I think this might be the issue?

Here’s my link: Webflow - New Strange