Forums

jasonheron

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

Mottie

I wasn't sure what you wanted, so I put together this demo which uses the following code:

  $('#slider1').movingBoxes({
      startPanel: 4,
      buildNav: true,
      navFormatter: function(index, panel) {
          return "&#9679;"
      },

      // 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 "&#9679;"
      },

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

treehouse : what would you like to learn today?

Forums

"Moving Boxes" - Link two sliders together.