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

Design help General
21

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

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.

23

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
24

You are awesome! Thanks. Most appreciated.

1 Like
25

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?

26

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

27

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/

28

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

29

@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