Is it possible to link to a specific slide in a slider?

Great news!

I have been looking at ways to recreate this function for a bit of time. Thanks for keeping current!

J

Hey - I’ve been looking for a resource to build this out simply using text links. Can you help a fellow webflower out?

@SeanBobby Hey! I’m sorry, but I don’t know if there is a way of doing it using simple text links. I’d still use .trigger('tap') function here. Here is how I’d do that.

Let’s say there are 3 slides and 3 text links. Let’s give them uniqueids:

  • gotoslide1
  • gotoslide2
  • gotoslide3

Now… you have to have the Slide Nav.

Let’s take a look at the generated HTML code on published website.

As you can see there is a w-round class and it has few w-slider-dot object classes inside of it. If you click on the w-slider-dot you will “show” a proper slide. You may ask - why do I speak about the parent w-round class instead of using w-slider-dot? That is because once you target the parent class you can find it’s nth div, eg. second div, using the :nth-child() selector. Let’s start coding!

First of all you need to set the code start:
$(document).ready(function() { ... });

Then, inside the { ... } you have to target a clickable element. In this case this should be those text links that have the unique ids that we gave at the beginning. Let’s go with the first one for now:

$('#gotoslide1').click(function(e) {
  e.preventDefault();
  ...
});

The e inside function() tells that the script will look for an event. In this case a click is an event which we want to catch. Why? Because the e.preventDefault(); line of code will … well, prevent default actions taken after click. It’s useful when you have a button in Webflow which by default is a link. If you target this object and use .preventDefault() function script will force browser not to handle that element as a link. That also solves the “I’m clicking something and it goes back to the top of the website” issue. Usefull ;).

Ok, let’s go with the code again.
$('.w-round:nth-child(1)').trigger('tap');

Sweet line of code. It targets the w-round class and it’s first child thanks to .nth-child() selector. Let’s clean up the code ;)

 $(document).ready(function() {
	// gotoslide1
	$('#gotoslide1').click(function(e) {
		e.preventDefault();
		$('.w-round:nth-child(1)').trigger('tap');
	});

	//gotoslide2 ...
	//gotoslide3 ...
});

Good luck!

7 Likes

Hello everyone!

Due to some changes in slider behaviour the code I posted above has changed a little bit. Instead of .trigger('click') which is no longer working, you should use .trigger('tap').

I will update the code above as well so new-coming users won’t get the bad idea of how it works :)

3 Likes

Hi everyone, do we have any updates regarding the main topic above? :slight_smile:
I tried to do some weird workarounds by targeting images themselves but it’s still buggy. I really hope there is some progress to this. Thanks!

Thanks bartekkustra for the script. That was helpful. but for some reason I couldn’t get it to work so I did some google around and find out the nth-child doesn’t work with a class, I change this line
$('.w-round:nth-child(1)').trigger('tap');
to
$('div.w-round div:nth-child(1)').trigger('tap');
and it works!

I have no background in javascript, if there is any correction to this, feel free to share~

3 Likes

Will all this work after exporting the code out of WF? Because I have done everything and it is not working for me. You published sample is not working: http://slider-changer.webflow.com/51

Found out the link is broken. Can you kindly provide so we can see how it works?

  1. the link is: http://slider-changer.webflow.com/

  2. I’ve fixed and made the code clear.

    $(‘#heroslide1’).click(function(e) {
    e.preventDefault();
    $(‘.hero-link’).removeClass(‘active’);
    $(this).addClass(‘active’);
    $(‘.w-round div:nth-child(1)’).trigger(‘tap’);
    });

1 Like

Thanks I would study it and let you know.

1 Like

This is perfect timing! With the code, what part would you change to link your button to that particular slide? For example, if my ‘Create’ button was to link to slide 2, what would I change in the code? So far, this is what I’ve decided to change:

$(‘#Create’).click(function(e) {
e.preventDefault();
$(‘.hero-link’).removeClass(‘active’);
$(this).addClass(‘active’);
$(‘.w-round div:nth-child(2)’).trigger(‘tap’);
});

Thanks buddy!

@PChalk1

$('#Create').click(function(e) {
  e.preventDefault();
  $('.w-round div:nth-child(2)').trigger('tap');
});

First thing, you should have an object with unique id Create. Secondly you must have the slider buttons (those dots). They can be hidden, but they can’t be deleted. If you need to go to the NEXT or PREVIOUS slide with some other buttons you can use $('.right-arrow').trigger('tap') or $('.left-arrow').trigger('tap').

I know I’ve helped you already on Skype, but I tought it would be good to post an answer here as well.


Generally you can make one button to trigger an event of clicking another button using the following template code:

var buttonYouClick= '.class or #uniqueid';
var whatShouldBeClicked = '.class or #uniqueid';

$(buttonYouClick).click(function(e) {
  e.preventDefault();
  $(whatShouldBeClicked).trigger('tap');
});
2 Likes

Hi Bartekkustra, I have actually implemented the code, but yet the link is not connecting to the slide: this is public url: https://webflow.com/design/verticalmenu-sub?preview=1d6fc3749214ed69ab6a5f2c665db1a4

url: http://verticalmenu-sub.webflow.com/

custom code:

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

Please what could I be doing wrongly.

You are missing last closing bracket and semicolon.

<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>>
1 Like

You are awesome! Thanks. Most appreciated.

1 Like

nice solution there!
i have a bit more specific issue according to this topic, i’m not sure if it’s possible to solve, but lets see…
so, i have a portfolio site with sliders containing links to the project pages. on the project page i have a go back button with a href=javascript:history.go(-1) command (since some projects have multiple directors, and the button should always just go back to the previous). is there any way to reload the page on the previous slide? for example if i click on a link on slide #3, go to the project page and when i hit the “back” button it loads the previous page with the 3rd slide open?

Hi @Doma_Harkai, I do not think that is possible, because going back in history will only take you back to the link in the url that you last visited, and that slide navigation trick using a link, is done via jquery code.

It might be possible to add jquery code to the top of the page in the designer, inside of an embed widget, that whenever the page is loaded, the script runs as the first item on the page, loading the slide in question. You would have to play around with this. If you set up something, we are happy to check it. :slight_smile: Cheers, Dave

will do! :smile:
actualy this looks promising, just i dont’t yet know how to implement it…interesting day ahead
http://benalman.com/code/projects/jquery-hashchange/examples/hashchange/

Great @Doma_Harkai :slight_smile: Sometimes getting the right functionality takes a little trial and error, but we are here to help you on the forum :slight_smile: When you start to get the Webflow site going, send us your read-only share link and we can take a look how the code is setup :smile:

Cheers, Dave

@bartekkustra: Thank you so much for this solution!

Does anyone happen to know if it is possible to activate my custom buttons to the corresponding slides while the automatic slide show option flicks through?

So that when the automatic slideshow option changes the viewport to show “Slide Two” that my custom button which activates “Slide Two” activates his active state? (in order for me to show that he is active with a custom style…?)

1 Like