Hi
Trying to link to A specific slide in My slider. I want to jump thru the slides via the links I created. What’s going wrong? Why does it is not working for me?
TIA
Here is my site Read-Only: https://preview.webflow.com/preview/omerchair?utm_source=omerchair&preview=dead2d05f920eaf3f58a7973b68210ea
(how to share your site Read-Only link)
This cannot be done at this time in Webflow, unfortunately as far as I know. It has been requested a few times though but no workaround has been posted.
Hi dFink
Thank You for reply
I have no idea how to do it, but this post talked about letting a slider start on a specific one:
https://discourse.webflow.com/t/slider-start-from-slide/45936?u=celeste
My guess would be, if you can let it start on a specific slide with their custom code, linking to one should also be possible? I just dont know how it would…
It is possible. With custom code.
In teory (im not checked this code in practice):
In links coud be a js function call to navigate certain slider and slide number.
javascript:navigateSliderToSlide(‘.slidermainthumbs’, 1)
function navigateSliderToSlide(slider, slideNumber){
$(slider+' div:nth-child('+slideNumber+')').trigger('tap');
//result should be : $('.slidermainthumbs div:nth-child(1)').trigger('tap');
}
Custom code should be located as described :
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 
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
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.
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
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.