Slider Syncing Vertical Layout

First, you will need to set up both of your sliders. One will need to use smaller images than the other. Let's set up the bigger one first.

Put your content in the first slider. In the example below, I am using just 3 images, but remember, the content can be anything you want.
To make things a little easier to work with, I am going to chekc Collapse in Edit Mode? which works a little different in MovingBox2 than using Stacks 2's hide mode.
Since in this project I am going to be setting up a Vertical Layout sync, you will want to add a 2 column stack. Now, depending on if you are using a responsive theme or not, will depend what kind of 2 column stack to use. If your site is static, use the standard 2 column stack.

If your site will be responsive, you will want to use some kind of responsive 2 column stack like Joe's Responsive Layout or if you are using Foundation for RapidWeaver, you can use the Foundation 2 Column stack also.

Once you have chosen your 2 column stack, add the bigger sized slider where you want it. Most people put this on the left and that is where it is on Joe's Preview page as well, so that is where I am going to put it. You will also want to adjust the size of that column, we suggest make the bigger side 75% and the smaller 25%, but you can configure it the way you want.
Now you need to get a second MovinbBox Stack and put it in the other side of the 2 column stack.
Be sure to set the second MovingBox to Slide Verical so the slides that are smaller go up and down.
Now you will need to figure out some settings. As you add the smaller images to the Slide Vertical stack, you will need to make the height of images to be a certain number all depending on how you want to set your slider up. In my example, I am only showing 3 slides at a time. You can change this, BUT, this will also make you adjust the width of the column this stack is in.
Since I am showing 3 images at a time, I need to take the height of the bigger images, and divide it by 3, if you were showing 4 images, you will want to divide the height of the bigger images by 4 and so on. Again, since I am showing 3, I will divide by 3. The height of my bigger images are all 400 pixels high. So when I divide it by 3, I get 133.333333333. You need to round up so that will make each image's height 133. To set the image height, double click on each image to bring up the Stacks Image Editor.
Once you have the Stacks Image Editor up, you will want to set the Max Height to the size in pixels that you figured out in step 8. So be sure the check the Constrain Height box.
Now you need to sync the two MovingBox 2 stacks together. First, let's click on the bigger image one. You will want to go to the bottom of the MovingBox settings and click on Enable Slider Sync? This will give you 3 new options.
Remember your Unique ID and the Sync ID settings. You can change them to whatever you want, but you will want to remember whatever you set them to. Next you will want to click on the smaller image MovingBox stack and click on Enable Slider Sync? on that stack. When you do, you will want to put your Sync ID from the first stack into your Unique ID of the second stack. Then you will want to take the Unique ID from the first stack and put it in the Sync ID of the second stack.

Now preview your page and you should see the sliders move in sync with each other.

Here are some hints that might help you if you can not get this working:

You only have to one Autoplay box checked on either MovingBox, but it does not hurt the syncing if it is checked on both. It will take the lowest amount entered.
MovingBox2 has a Collapse in Edit Mode? setting, which works like the visibility toggle that comes in Stacks 2.5+, BUT it still shows 1 slide, so if you have multiple sliders (especially in slider sync) you can see which ones are which.
You can enable up to two different breakpoints, but these will more than likely NOT be necessary for the Slider Sync you are setting up.