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

问题描述

我需要动画/当箭头被点击时，在投资组合页面上滑动两个div（根据附加的图像，在膝上型电脑和手机上的屏幕截图）。我可以适度地理解/更改JS插件，并且非常熟练的HTML / CSS。任何推荐的插件或方法，无需编写特定的JS代码？

我使用的基础框架Zurb有'Orbit'滑块插件内置，不确定它是否可以自定义，足以拉开这一点。

解决方案

没有开箱即用的方式它，但你可以黑客。假设您有以下轨道：

 < 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 （.orbit-prev）; 
 var slider1Next = slider1.parent（）。find（。orbit-next）; 
 var slider2Next = slider2.parent（）。find -next）; 
 
 slider1Prev.click（function（）{
 if（fromSlide1）return; 
 fromSlide1 = true; 
 slider2Prev.click b $ b fromSlide1 = false; 
}）; 
 slider2Prev.click（function（）{
 if（fromSlide2）return; 
 fromSlide2 = true; 
 slider1Prev。 （）; 
 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> 
  




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?

P.S 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

解决方案

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>

这篇关于使用Foundation的Orbit内容滑块同时滑动两个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！