पूर्ण पृष्ठ.जेएस स्क्रॉल पर क्षैतिज स्लाइड

Question

मैं लंबवत और क्षैतिज स्क्रॉल प्राप्त करने के लिए 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; 

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

यहाँ है थोड़ा और अधिक विस्तृत उदाहरण जो @undefinedtoken :)

योजना के कोड शुरू:

उदाहरण कोड:

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