How to Sync Webflow Sliders

This is a Webflow slider (the arrows have been deleted, and the slider-nav has been hidden):

This is another Webflow slider. Moving the slides will update the above slider. Swiping works too!

Cheerfulness, it would appear, is a matter which depends fully as much on the state of things within, as on the state of things without and around us.- Charlotte Bronte
A mind troubled by doubt cannot focus on the course to victory.- Arthur Golden
The best way to convince a fool that he is wrong is to let him have his own way.- Josh Billings


To make both sync together, we are going to monitor the w-slide-nav buttons from one of the sliders and duplicate the active state in the target slider. If you do not want to display the slider navigation, give it a class and hide it instead of deleting it.

In this example, I'm going to sync the top slider based on the bottom slider. Also, for the target (top) slider, I'm going to delete the arrows, hide the slide nav, and disable swipe gestures in the settings tab.

Step 1:

Give both sliders nav bar (the wrapper containing the circles) an id, in the settings tab. I'm going to name the bottom slider's sourceNav, and top slider's nav bar targetNav. If you change this, you need to update the code below.

Step 2:

Go to the current page settings on the left toolbar. Under the Custom Code section in "Before </body> tag", paste this JavaScript code. You can also paste this code in an embed component.

// On page ready
var Webflow = Webflow || [];
Webflow.push(function() {

  // Cache references to nav elements
  var sourceNav = $('#sourceNav');
  var targetNav = $('#targetNav');

  // Every 200ms
  setInterval(function() {
    // Find the index of source slideNav button's active class
    var index = sourceNav.children('.w-active').index();

    // Update target slider by triggering a "tap" event on the targetNav corresponding slide button

  }, 200); // End interval

}); // End ready function

Step 3:

Publish your site and preview it in the sub-domain (this doesn't work in the editor's Toggle Preview).