Fullpage.js Горизонтальное скольжение по прокрутке

Question

Im, используя fullpage.js для достижения вертикальной и горизонтальной прокрутки.

я хочу ползунок, чтобы скользить, когда я прокручивать по Разделу 2.

функциональность, подобную этой website

Вот мой код:

$(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 > 0 || event.originalEvent.detail < 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); 
        } 
       } 
      }); 
     } 
    } 
}); 

});

Для визуального:

Answer 1

Наконец получил это работает:

var slideIndex = 1, 
sliding  = false; 

$ (документ) .ready (функция() {

$('#fullpage').fullpage({ 

    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 
    scrollingSpeed:1000, 
    css3: true, 

    onLeave: function(index, nextIndex, direction) { 

     if(index == 2 && !sliding) { 

      if(direction == 'down' && slideIndex < 5) { 

       sliding = true; 
       $.fn.fullpage.moveSlideRight(); 
       slideIndex++; 
       return false; 

      } else if(direction == 'up' && slideIndex > 1) { 

       sliding = true; 
       $.fn.fullpage.moveSlideLeft(); 
       slideIndex--; 
       return false; 

      } 

     } else if(sliding) { 

      return false; 

     } 

    }, 

    afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) { 

     sliding = false; 

    } 

}); 

});

Answer 2

Вот немного более сложный пример, который возобновляет код @undefinedtoken :)

плана:

Exemple Код:

$(document).ready(function() { 

     var slideIndex2 = 1, sliding = false; 

     $('#fullpage').fullpage({ 

      // ...your cutom code... 

      //events 
      onLeave  : function (index, nextIndex, direction) { 
       if (index == 3 && !sliding) { 
        if (direction == 'down' && slideIndex2 < 4) { 
         sliding = true; 
         $.fn.fullpage.moveSlideRight(); 
         return false; 
        } else if (direction == 'up' && slideIndex2 > 1) { 
         sliding = true; 
         $.fn.fullpage.moveSlideLeft(); 
         return false; 
        } 
       } else if (sliding) { 
        return false; 
       } 

      }, 
      afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) { 
       sliding = false; 
      }, 
      onSlideLeave : function (anchorLink, index, slideIndex, direction, nextSlideIndex) { 
       if (index == 3) { 
        if (direction == 'right') { 
         sliding = true; 
         slideIndex2++; 
        } 

        if (direction == 'left') { 
         sliding = true; 
         slideIndex2--; 
        } 
       } 
      } 
     }); 
    });