使用 Foundation 的 Orbit 内容滑块同时滑动两个 div

Question

单击箭头时，我需要同时在投资组合页面上为两个 div 设置动画/滑动（根据附加图像，笔记本电脑和手机上的屏幕截图）。我可以适度理解/更改 JS 插件，并且非常精通 HTML/CSS。有什么推荐的插件或方法可以做到这一点而无需编写特定的 JS 代码？

P.S 我正在使用 Zurb 的 Foundation 框架，它内置了“Orbit”滑块插件，但不确定它的可定制性足以实现这一点

Answer 1

jQuery 中的动画函数是异步的，所以你可以同时调用元素的动画：

var deltaW = window.innerWidth;

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

你也可以在动画完成的时候触发一个函数：

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

编辑：工作示例（请注意 css 规则的位置属性）：
http://jsfiddle.net/2gCKY/1/

Answer 2

没有开箱即用的方法，但您可以随意破解。假设您有以下轨道：

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

您可以通过点击导航箭头同步两个Orbits的滑动，前提是两个Orbits具有相同的timer_speed（默认情况下它们会）：

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