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.
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.
// On page ready
var Webflow = Webflow || ;
// Cache references to nav elements
var sourceNav = $('#sourceNav');
var targetNav = $('#targetNav');
// Every 200ms
// 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
Publish your site and preview it in the sub-domain (this doesn't work in the editor's Toggle Preview).
- Reason for using setInterval is so that even swipe updates are propagated from the source to target.
- The above code currently only syncs two sliders, and will have to be modified for multiple sets of sliders.
- Discuss or ask any questions on the forum at http://forum.webflow.com/t/22224.
- You can clone this project "Webflow Tricks" from my profile at https://webflow.com/samliew, to see how it is done.