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

Design help General
12

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

757×183 27.7 KB

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