Grow your CSS skills. Land your dream job.

“Moving Boxes” – Link two sliders together.

  • # November 15, 2012 at 6:10 am

    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)?

    # November 17, 2012 at 4:09 am

    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.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".