SO. 48450860 [Answer]
by Bright RYMER
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.extensions.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<div id="fullpage">
<div class="section">hey hey hey</div>
<div class="section slider">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
<div class="slide"> Slide 4 </div>
</div>
<div class="section">Ho ho ho</div>
<div class="section">Ho hi ho</div>
</div>
JavaScript
$('#fullpage').fullpage({
//Navigation
menu: '#menu',
lockAnchors: false,
anchors: [],
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide', 'thirdSlide', 'fourthSlide'],
showActiveTooltip: true,
slidesNavigation: true,
slidesNavPosition: 'bottom',
//Scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
fitToSectionDelay: 1000,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
interlockedSlides: false,
offsetSections: false,
resetSliders: false,
fadingEffect: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: false,
scrollOverflowReset: false,
scrollOverflowOptions: null,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
bigSectionsDestination: null,
//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,
//Design
controlArrows: true,
verticalCentered: true,
sectionsColor: ['#0061ff', '#ff0000'],
paddingTop: '0',
paddingBottom: '0px',
fixedElements: '#header, .footer',
responsiveWidth: 0,
responsiveHeight: 0,
//Custom selectors
sectionSelector: '.section',
slideSelector: '.slide',
lazyLoading: true,
//events
onLeave: function(index, nextIndex, direction) {},
afterLoad: function(anchorLink, index) {},
afterRender: function() {},
afterResize: function() {},
afterResponsive: function(isResponsive) {},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex) {}
});
$('.slide').on('mousewheel', function(e, delta) {
if (delta == 1) { // Up
// Move to previous section if this is first slide in slider
if ($(this).is(":first-child"))
return true;
$('.fp-prev').trigger('click');
} else { // Down
// Move...