I wish to display two sliders on the website that move in sync when I swipe through them. I am using the masterslider plugin. One way to do this is to give each slider a variable and then use a function on it.
Here is the code that I added in the slider init callback:
function(event){
var api = event.target;
var firstSlider = masterslider_instances[0];
var secondSlider = masterslider_instances[1];
firstSlider.api.view.addEventListener(MSViewEvents.SCROLL, function() {
secondSlider.api.view.controller.changeTo(firstSlider.api.view.controller.value);
});
}
This code is not fully effective as the second slider fails to show slide 2, 3, etc. What am I missing? Is there an easier way? Here is the test site: http://siegristpartner.com/w2
Many thanks.