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

Question

单击箭头时，我需要同时对投资组合页面上的两个div进行动画处理/滑动（根据附加的图像，笔记本电脑和手机上的屏幕截图）。 我可以适当地理解/更改JS插件，并且非常精通HTML / CSS。 是否有推荐的插件或无需编写特定JS代码的方式？

PS我正在使用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-rule的position属性）：
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>

您可以通过单击导航箭头来同步两个轨道的滑动， 前提是两个轨道具有相同的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>