垂直スクロールして、セクションをスライドさせます。

Question

私は十分にスクロールした後にトップに固定されているスライダを作成しようとしています（そのビットは取得できます）。次に、コンテンツとテキストの3つのセクションをスクロールする必要があります。どのように私はそれを行う必要があります任意のポインター。ここに私のマークです。

<div class="fixed-slider"> 
     <section class=" section slider slider-one vertical-align" id="step1"> 
      <div class="container"> 
       <div class="row is-animated vertical-align"> 
        <div class="col-md-5 col-xs-12"> 
         <ul class="indicators"> 
          <li class="active"></li> 
          <li></li> 
          <li></li> 
         </ul> 
         <span>Step 1</span> 
         <h2>Download the app on your phone</h2> 
         <p>Download it <span class="selling">Free</span> for your Apple iPhone</p> 
         <a href=""><img src="img/apple-store.svg" alt=""></a> 
        </div> 
        <div class="col-md-7 col-xs-12"> 
         <img src="img/step1.png" alt=""> 
        </div> 
       </div> 
      </div> 
     </section> 
     <section class="section slider slider-two vertical-align" id="step2"> 
      <div class="container"> 
       <div class="row vertical-align is-animated"> 
        <div class="col-md-5 col-xs-12"> 
         <ul class="indicators"> 
          <li></li> 
          <li class="active"></li> 
          <li></li> 
         </ul> 
         <span>Step 2</span> 
         <h2>Select your style</h2> 
         <p>Choose from a tange of hair and make up styles for any ocassion</p> 
         <a href=""><img src="img/apple-store.svg" alt=""></a> 
        </div> 
        <div class="col-md-7 col-xs-12"> 
         <img src="img/step2.png" alt=""> 
        </div> 
       </div> 
      </div> 
     </section> 
     <section class="section slider slider-three vertical-align" id="step3"> 
      <div class="container"> 
       <div class="row vertical-align is-animated"> 
        <div class="col-md-5 col-xs-12"> 
         <ul class="indicators"> 
          <li></li> 
          <li></li> 
          <li class="active"></li> 
          <li class="mobile-arrow"></li> 
         </ul> 
         <span>Step 3</span> 
         <h2>Make a Booking</h2> 
         <p>Our easy-to-use booking system allows for quick selection at a time that suits you.</p> 
         <a href=""><img src="img/apple-store.svg" alt=""></a> 
        </div> 
        <div class="col-md-7 col-xs-12"> 
         <img src="img/step3.png" alt=""> 
        </div> 

       </div> 
      </div> 
     </section> 
     </div> 

Answer 1

あなたはin this exampleとしてscrollOverflowオプションでfullPage.jsを使用することができます。

次に、最初のスライドの一番下に達すると、scroll Horizontally extensionを使用して水平スクロールを強制できます。