Is it possible to link to a specific slide in a Webflow slider? YES!

If you got here, believe me - I had the same problem but below is a solution just for you.

Czytaj dalej

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');

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:

Remember to add data-slide-index attribute to your HTML element.

Let's start with Desktop first (#WebflowWay)

9 different <div> objects with class=".slider-block" and the 2 effects - onHover and onClick effects.
Here are the blocks made in Webflow..
Here is New Slider block within Slider Container.
This is a look at specific Slide.
Pro Tip: Navigation dots can be hidden!
This is onHover effect built with Webflow
Don't forget about Hover Out effect.

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');

Now focus on Mobile users (#WebflowWay)

When user clicks the element, 3x3 Grid hides and display linked Slide.
<script type="text/javascript">
$('.slider-block').click(function() {
  if (window.matchMedia("(max-width: 990px)").matches) {
    $('.slider-block').css('display', 'none');

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

Zróbmy razem coś wielkiego!

Wypełnij formularz lub wyślij wiadomość, a my zadbamy o rozwój Twojej firmy.

Napisz do nas

Twoja wiadomość została wysłana. Skontaktujemy się z Tobą w ciągu 24h.
Oops! Pojawił się błąd podczas wysyłki formularza. Sprawdź proszę dane czy są poprawnie wypełnione i spróbuj ponownie.