fullpage.js独立したセクション

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> 

のような構造を作成した。そして、私が設定したドキュメント

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

ごとに、次のJavascriptを追加したfullpage.js

を使用していますJSFiddleを使って、私が物事にどこにいるのかを実証してください。したがって、現時点では、水平方向と垂直方向にスクロールすることができます。私の最初のイメージは馬で、私がしたいのは、馬についての情報を表示するために垂直にスクロールすると、このセクションにいるときです。ですから、本質的に、私は縦スクロールをセクションの親に関連させようとしています。あなたが熊のイメージにあり、垂直にスクロールしている場合、それはクマに関する情報を表示するはずです。

このようなことは可能でしょうか？

ありがとう

Answer 1

Yeap。可能なのはInterlocked Slides extensionです。

残念ながら、あなた自身で行うのは簡単ではありません。同時に複数のスライドを別々のセクションに移動させる場合、いくつかのコア制限があります。