title: Fullpage.js Slide horizontal on scroll
body: <p>Im using fullpage.js to achieve vertical and horizontal scroll.</p>
  
  <p>i want the slider to slide when i scroll on Section 2.</p>
  
  <p>Functionality similar to this  <a href="http://www.mi.com/shouhuan/" rel="noreferrer">website </a></p>
  
  <p>Here's my code : </p>
  
  <pre><code>$(document).ready(function() {
  $('#fullpage').fullpage({
      sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
      anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
      menu: '#menu',
      css3: true,
      loop: false,
      afterLoad: function(anchorLink, index) {
          var loadedSection = $(this);
  
          //using index
          if (index == 3) {
              $.fn.fullpage.setAllowScrolling(false);
              $.fn.fullpage.setKeyboardScrolling(false);
              $(window).bind('mousewheel DOMMouseScroll', function(event) {
                  if (event.originalEvent.wheelDelta &gt; 0 || event.originalEvent.detail &lt; 0) {
                      $(".fp-prev").click();
                      if ($(".fp-slide:first-child").hasClass("active")) {
                          $.fn.fullpage.setAllowScrolling(true);
                          $.fn.fullpage.setKeyboardScrolling(true);
                      }
                  } else {
                      $(".fp-next").click();
                      if ($(".fp-slide:last-child").hasClass("active")) {
                          $.fn.fullpage.setAllowScrolling(true);
                          $.fn.fullpage.setKeyboardScrolling(true);
                      }
                  }
              });
          }
      }
  });
  </code></pre>
  
  <p>});</p>
  
  <p>For visual :<a href="https://i.stack.imgur.com/EQ9ed.png" rel="noreferrer"><img src="https://i.stack.imgur.com/EQ9ed.png" alt="enter image description here"></a> </p>