Streaming live at 10am (PST)

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

I appreciate the response danro. That’s a good alternative, I’ll see if I can incorporate something similar in my site :smile:


@david @danro yes you can. see example here

Contact @bartekkustra for integration.

I’ve just done even better thing :slight_smile: You can have eg. 6 slides and 6 buttons that each links to a proper slide ;D I’m awesome!;D

When I’m happy with the code I’ll probably post it on forum but it’s not that easy to implement. Those of you who need it badly can contact me using details provided in my profile.

Just so you can take a look at how it works: I hope you like it :slight_smile:

If possible, I would like to see how it works, but the web link doesn’t work…:wink:
TKS! sry ;]


Our upcoming Tabs widget will solve this problem. Look out for it this week! @danro is the man!

1 Like

Great news!

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


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

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.

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

	//gotoslide2 ...
	//gotoslide3 ...

Good luck!


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


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
$('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~


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:

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

  1. the link is:

  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!


$('#Create').click(function(e) {
  $('.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) {

Hi Bartekkustra, I have actually implemented the code, but yet the link is not connecting to the slide: this is public url:


custom code:

 $(document).ready(function() {
$('#heroslide1').click(function(e) {
$('.w-round div:nth-child(1)').trigger('tap');
$('#heroslide2').click(function(e) {
$('.w-round div:nth-child(2)').trigger('tap');

Please what could I be doing wrongly.