- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi there,
I’m currently using the “Moving Boxes” Slider and I’m no genius when it comes down to the Java/css…
Does anyone know how I can get two sliders to work off the same buttons (Next/Prev)?
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.