使用Foundation的动态观察内容滑块同时滑动两个div

Question

​

​

我需要动画/幻灯片上的投资组合页面上的两个div (根据附件中的图像，在笔记本电脑和手机上截图)，同时箭头被点击。我对JS插件的理解和修改还算不错，并且精通HTML/CSS。有什么推荐的插件或方法可以做到这一点，而不必编写特定的JS代码？

附注:我使用的是Zurb的Foundation框架，它内置了'Orbit‘滑块插件，但我不确定它的可定制性是否足以实现这一点

Answer 1

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

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

Answer 2

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/