Dance of the Dots: Choreographing Custom Slider Controls in Webflow

Hey, Webflow designers. Today, we're venturing into the juicy world of jQuery and custom slider controls. Yes, we’re about to make those static dots under your Webflow slider dance to your tune. We recently had a project where we needed to control the Webflow slider using linkblocks outside the Webflow slider element. (Long story short we have an overlay nav element with a bunch of linkblocks that needed to take you to specific slides when you clicked on them). Below’s a short video showing our custom controls:

Anyhow, we Googled a bunch, figured out we could trigger a change to a specific slide by simulating a click on that slide’s navigation dot and cobbled together a script to do that). Lets kick off by giving you the script you’re gonna need for this:

Prelude to the Dance: What You'll Need

Before we dive into the code ocean, ensure you have the following ready:

A Webflow project where you want to implement the custom slider controls. Classes on the slider don’t matter much, we’re calling the native slider not names in Webflow in the script: .w-slider-dot
We don’t even have them visible in our project, element visibility was set to hidden.
A very basic understanding of jQuery (fear not, we’ll walk through it).

Act 1: Preparing the Stage

First thing’s first, let’s ensure our Webflow project is prepped and primed for some jQuery action.

Creating the Slider:

Navigate to your Webflow Designer.
Create a new slider element.
Customize it to your heart’s content but leave the dots below the slider as they are, or hide them.

Custom Dot Creation:

Create a new div block and name it controls__wrap.
Now, within controls__wrap, create your link blocks (one for each slide in your slider) and give each a class of slider__controller.
Style these link blocks as you wish - these are your controls that will take you to each slide in your slider, their order corresponds to the order of your slides.

Act 2: The jQuery Ballet

Now, onto the code that will make those dots dance! We’re going to use jQuery to create a lively interaction between our custom dots and the Webflow native slider dots.

Code Pen Preparation:

Head to your project settings or page settings.
Under the ‘Custom Code’ tab, you’ll find a haven for your custom scripts in the ‘Footer Code’ section. This is where our jQuery script will reside.

Pasting the Script:

Copy the script we shared earlier.
Paste it into the ‘Footer Code’ section of your project settings.

Understanding the Magic:

The script loops through each custom dot within .controls__wrap, and when a custom dot is clicked, it triggers a tap event on the corresponding native Webflow slider dot, navigating to the respective slide.

Act 3: Curtains Close, Applause Ensues

Now, head back to the Designer, hit publish, and behold the dance of the dots on your live site! Your custom dots should now control the Webflow slider, providing a tailored experience for your audience.

We hope this helps you as much as it helps us, I’m not sure who came up with the idea to control the dots, we just found a reference and a snippet of the code on Stackoverflow and then fleshed it out from there, but it’s neat, so enjoy.