Fullpage.js Dia horizontal auf Rolle

Question

Ich benutze fullpage.js, um vertikale und horizontale Scroll zu erreichen.

i den Schieber wollen gleiten kann, wenn ich auf Abschnitt blättern 2.

Funktionalität ähnlich wie diese website

Hier ist mein 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 > 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); 
        } 
       } 
      }); 
     } 
    } 
}); 

});

Zur visuellen:

Answer 1

Schließlich habe es funktioniert:

var slideIndex = 1, 
sliding  = false; 

$ (document) .ready (function() {

$('#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

Hier ist ein wenig aufwendiges Beispiel, das den Code von @undefinedtoken :)

-Plan wieder aufnimmt:

Exemple Code:

$(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--; 
        } 
       } 
      } 
     }); 
    });