Slide two divs at the same time using Foundation's Orbit content slider

Question

I need to animate/slide two div on a portfolio page (as per attached image, screenshot on both laptop and phone) simultaneously when the arrows are clicked. I can moderately understand/change JS plugins and am pretty proficient with HTML/CSS. Any recommended plugins or ways to do this without having to write specific JS code?

PS I'm using Foundation framework from Zurb which has the 'Orbit' slider plugin built in, not sure that it's customizable enough to pull this off though

Answer 1

The animation functions in jQuery works async so you can just call animation of the elements at the same time:

var deltaW = window.innerWidth;

$('#myDiv1').animate({left : deltaW});
$('#myDiv2').animate({left : deltaW});

You can also trigger a function when the animation is done:

$('#myDiv1').animate({left : deltaW});
$('#myDiv2').animate({left : deltaW }, function() { /*.. do something ..*/});

Edit: working example (please note the position attribute for the css-rule):
http://jsfiddle.net/2gCKY/1/

Answer 2

There is no out-of-the-box way of doing it but you can hack around. Say you have the following Orbits:

<div class="row">
    <div class="large-8 columns">
        <ul data-orbit id="slider1">
            <li>
            <img src="http://placehold.it/800x350&text=slide 1" />                
            </li>
            <li>
            <img src="http://placehold.it/800x350&text=slide 2" />                
            </li>
            <li>
            <img src="http://placehold.it/800x350&text=slide 3" />                
            </li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="large-4 columns">
        <ul data-orbit id="slider2">
            <li>
            <img src="http://placehold.it/400x150&text=slide 1" />                
            </li>
            <li>
            <img src="http://placehold.it/400x150&text=slide 2" />                
            </li>
            <li>
            <img src="http://placehold.it/400x150&text=slide 3" />                
            </li>
        </ul>
    </div>
</div>

You can sync the sliding of the two Orbits by clicking on the navigation arrows, provided that the two Orbits have the same timer_speed (by default they will):

<script type="text/javascript">
    $(document).foundation();
    $(document).ready(function () {
        var fromSlide1 = false;
        var fromSlide2 = false;
        var slider1 = $("#slider1");
        var slider2 = $("#slider2");
        var slider1Prev = slider1.parent().find(".orbit-prev");
        var slider2Prev = slider2.parent().find(".orbit-prev");
        var slider1Next = slider1.parent().find(".orbit-next");
        var slider2Next = slider2.parent().find(".orbit-next");

        slider1Prev.click(function () {
            if (fromSlide1) return;
            fromSlide1 = true;              
            slider2Prev.click();
            fromSlide1 = false;
        });
        slider2Prev.click(function () {
            if (fromSlide2) return;
            fromSlide2 = true;
            slider1Prev.click();
            fromSlide2 = false;
        });
        slider1Next.click(function () {
            if (fromSlide1) return;
            fromSlide1 = true;              
            slider2Next.click();
            fromSlide1 = false;
        });
        slider2Next.click(function () {
            if (fromSlide2) return;
            fromSlide2 = true;
            slider1Next.click();
            fromSlide2 = false;
        });
    });
</script>