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, чтобы продемонстрировать, где я нахожусь с вещами. Поэтому на данный момент вы можете прокручивать по горизонтали и по вертикали. Поэтому мой первый образ - лошадь, и я хочу, чтобы это было, когда вы находитесь в этом разделе, если вы прокручиваете вертикально, чтобы отображать информацию о лошади. По существу, я пытаюсь сделать вертикальную прокрутку связанной с родителем раздела. Если вы находитесь на изображении медведя и прокрутите его вертикально, он должен отобразить информацию о медведе.

Возможно ли подобное?

Thanks

Answer 1

Yeap. Возможно с Interlocked Slides extension.

К сожалению, это нелегко сделать самостоятельно. Существуют некоторые основные ограничения, связанные с перемещением нескольких слайдов в разных разделах одновременно.