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

2022-01-24 00:00:00 slider jquery css zurb-foundation

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

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 我正在使用 Zurb 的 Foundation 框架，它内置了Orbit"滑块插件，但不确定它的可定制性足以实现这一点

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>

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

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>

相关文章