Streaming live at 10am (PST)

Link to A specific slide inside A Slider


#1

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)


#2

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.


#3

Hi dFink
Thank You for reply


#4

I have no idea how to do it, but this post talked about letting a slider start on a specific one:

https://forum.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…


#5

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 :


#6

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


#7

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!


#8

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.


#9

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!


#10

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…


#11

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


#12

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!


#13

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.