I’m trying to implement buttons that will take a user to a specific slide in a slider. I’ve tried giving both the slide and the image within the slide uniqueID’s and linking the buttons to those, however they don’t seem to have any effect at switching to the active slide.
Thanks,
David
Hi David,
Unfortunately this is not currently possible with the Slider, as we do not have an event system in place (yet) to handle these types of click actions.
As a workaround, you might be able to customize the Slider dots, as some of our other users have done- using a bit of custom code:
I appreciate the response danro. That’s a good alternative, I’ll see if I can incorporate something similar in my site 
Thanks,
David
@david @danro yes you can. see example here http://gca.webflow.com/promoteur
Contact @bartekkustra for integration.
I’ve just done even better thing 
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: http://cateringtemplate.webflow.com I hope you like it
If possible, I would like to see how it works, but the web link doesn’t work…
TKS!
Our upcoming Tabs widget will solve this problem. Look out for it this week! @danro is the man!
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:
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!
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?
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~
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?
the link is: http://slider-changer.webflow.com/
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’);
});
Thanks I would study it and let you know.
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!