fullpage.js unabhängige Abschnitte

Question

ich verwende fullpage.js

Ich habe eine Struktur geschaffen, wie 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> 

Und dann fügte die folgende Javascript gemäß den docs

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

I gesetzt haben bis ein JSFiddle zu demonstrieren, wo ich mit Dingen bin. In diesem Moment können Sie horizontal und vertikal scrollen. Mein erstes Bild ist also ein Pferd, und was ich machen möchte, ist, wenn Sie in diesem Abschnitt sind, wenn Sie vertikal blättern, um Informationen über das Pferd anzuzeigen. Im Wesentlichen versuche ich, das vertikale Scrollen mit dem übergeordneten Abschnitt in Beziehung zu setzen. Wenn Sie sich auf dem Bärenbild befinden und vertikal scrollen, sollten Informationen über den Bären angezeigt werden.

Wäre so etwas möglich?

Danke

Answer 1

Yeap. Möglich mit der Interlocked Slides extension.

Leider ist es nicht einfach, es selbst zu tun. Es gibt einige grundlegende Einschränkungen, wenn es darum geht, mehrere Folien in verschiedenen Abschnitten gleichzeitig zu verschieben.