If you are in hurry get the code:

<script type="text/javascript">
$('.slider-block').click(function() {
  // Get data-slide-index value of Clicked element
  let slideIndex = $(this).data('slide-index');

  // Slide into specific Slider based on aria-label value
  // Pretend to tap on slider navigation dots
  $('.w-slider-dot[aria-label="Show slide ' + slideIndex + ' of 9"]').trigger('tap');
});
</script>

This is very basic example of having clickable elements on a page and to link them to a specific slide in slider just on these elements.

But hey, what if you want to have a slider with functionalities like on Instagram? I have been there ;) Below is something which is created in Webflow by using only their JS library - no other JS libs are required, only Webflow <3.

Before we start diving in let's talk about custom attributes - we will be using them as a slideIndex value in our code:

Let's start with Desktop first (#WebflowWay)

Last thing we need is to add a little JS inside our custom code to display hidden Slider section:

<script type="text/javascript">
$('.slider-block').click(function() {
  $('#slider').css('display', 'block');
});
</script>

Now focus on Mobile users (#WebflowWay)

<script type="text/javascript">
$('.slider-block').click(function() {
  if (window.matchMedia("(max-width: 990px)").matches) {
    $('.slider-block').css('display', 'none');
  }
});
</script>

On mobile we need actualy one more line to our main code.

‍

I hope this article helped you with creating a link on ANY element you want to behave like navigation dots when they are clicked. If you still have some problems, please let me know by sending a comment here or by an email (get a quick answer).