Question

我创建了一个像这样的结构

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

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

fullpage.js独立部分

1 个答案: