Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS “Moving Boxes” – Link two sliders together. Re: “Moving Boxes” – Link two sliders together.

#114621
Mottie
Member

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.