I wasn’t sure what you wanted, so I put together [this demo](http://jsfiddle.net/Mottie/acV4n/626/) which uses the following code:
$(‘#slider1’).movingBoxes({
startPanel: 4,
buildNav: true,
navFormatter: function(index, panel) {
return “●”
},
// callback upon change panel initialization
initialized: function(e, s1, tar) {
var s2 = $(‘#slider2’).data(‘movingBoxes’);
s1.$wrap.find(‘.mb-left, .mb-right’).bind(‘click’, function() {
s2[ $(this).hasClass(‘mb-left’) ? ‘goBack’ : ‘goForward’ ]();
});
}
});
$(‘#slider2’).movingBoxes({
startPanel: 4,
buildNav: true,
navFormatter: function(index, panel) {
return “●”
},
// callback upon change panel initialization
initialized: function(e, s2, tar) {
var s1 = $(‘#slider1’).data(‘movingBoxes’);
s2.$wrap.find(‘.mb-left, .mb-right’).bind(‘click’, function() {
s1[ $(this).hasClass(‘mb-left’) ? ‘goBack’ : ‘goForward’ ]();
});
}
});
This bit of code might be confusing
s2[ $(this).hasClass(‘mb-left’) ? ‘goBack’ : ‘goForward’ ]();
so I’ll write it out long hand for you
if ( $(this).hasClass(‘mb-left’) ) {
s2.goBack();
} else {
s2.goForward();
}
The problem I have with this code is that if the user clicks on the navigation or uses the keyboard keys to change the slide, the other MovingBox won’t update.
If you need them synchronized, then I’ll have to work on a different method.
