All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

“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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed