fullpage.js独立部分

Question

I am using fullpage.js

I have created a structure like so

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

And then added the following Javascript as per the docs

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

I have set up a JSFiddle to demonstrate where I am at with things. So at the moment, you can scroll horizontally and vertically. So my first image is a horse, and what I want to do is when you are on this section, if you scroll vertically for it to display information about the horse. So essentially, I am trying to make the vertical scrolling relate to the section parent. If you are on the bear image and scroll vertically, it should display information about the bear.

Would something like this be possible?

Thanks

Answer 1

Yeap. Possible with the Interlocked Slides extension .

Unfortunately it is not easy to do it by yourself. There are some core restrictions when it comes to move multiple slides in different sections at the same time.