fullpage.js独立部分

Question

我正在使用fullpage.js

我创建了一个结构，如下所示

<section id="portfolio">
    <div class="col-lg-5 col-sm-5" id="portfolio-left">
        &nbsp;
    </div>

    <div class="col-lg-7 col-sm-7" id="portfolio-right">
        <div id="fullpage">
            <section class="vertical-scrolling">
                <div class="horizontal-scrolling">
                    <img src="https://www.scienceabc.com/wp-content/uploads/2016/05/horse-running.jpg">
                </div>
                <div class="horizontal-scrolling">
                    <img src="https://i.ytimg.com/vi/a6gHj0bHmg8/maxresdefault.jpg">
                </div>
            </section>
            <section class="vertical-scrolling">
                <h2>fullPage.js</h2>
                <h3>This is the second section</h3>
            </section>
        </div>
    </div>
</section>

然后根据文档添加了以下Javascript

$('#fullpage').fullpage({
    sectionSelector: '.vertical-scrolling',
    slideSelector: '.horizontal-scrolling',
    navigation: true,
    slidesNavigation: true,
    css3: true,
    controlArrows: false,
});

我已经设置了一个JSFiddle来演示我在处理事情上的位置。所以现在，你可以水平和垂直滚动。所以我的第一张图片是一匹马，我想要做的是当你在这一部分时，如果你垂直滚动它来显示关于马的信息。因此，从本质上讲，我正在尝试使垂直滚动与节的父级相关。如果您在熊图像上并垂直滚动，它应该会显示关于熊的信息。

这样的事情有可能发生吗？

谢谢

Answer 1

是啊。使用Interlocked Slides extension是可行的。

不幸的是，自己做这件事并不容易。当涉及到同时在不同部分移动多个幻灯片时，有一些核心限制。