I'm using Fullpage.js for horizontal & vertical scrolling. I have 5 sections that each contain 4 slides.
I'm implementing the solution from this question: Fullpage.js Slide horizontal on scroll
Except I have 4 slides in each section that I need to loop through. Every slide works when scrolling down with the mouse except for the very last section (section 5). Any idea on why the last section wouldn't be scrolling through the slides?
Code here: https://codepen.io/anon/pen/rGvxzL
JS:
$(document).ready(function () {
var slideIndex1 = 1;
var slideIndex2 = 1;
var slideIndex3 = 1;
var slideIndex4 = 1;
var slideIndex5 = 1;
var sliding = false;
$('#fullpage').fullpage({
onLeave: function (index, nextIndex, direction) {
if (index == 1 && !sliding) {
if (direction == 'down' && slideIndex1 < 4) {
sliding = true;
$.fn.fullpage.moveSlideRight();
return false;
} else if (direction == 'up' && slideIndex1 > 1) {
sliding = true;
$.fn.fullpage.moveSlideLeft();
return false;
}
}
if (index == 2 && !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;
}
}
if (index == 3 && !sliding) {
if (direction == 'down' && slideIndex3 < 4) {
sliding = true;
$.fn.fullpage.moveSlideRight();
return false;
} else if (direction == 'up' && slideIndex3 > 1) {
sliding = true;
$.fn.fullpage.moveSlideLeft();
return false;
}
}
if (index == 4 && !sliding) {
if (direction == 'down' && slideIndex4 < 4) {
sliding = true;
$.fn.fullpage.moveSlideRight();
return false;
} else if (direction == 'up' && slideIndex4 > 1) {
sliding = true;
$.fn.fullpage.moveSlideLeft();
return false;
}
}
if (index == 5 && !sliding) {
if (direction == 'down' && slideIndex5 < 4) {
sliding = true;
$.fn.fullpage.moveSlideRight();
return false;
} else if (direction == 'up' && slideIndex5 > 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 == 1){
if (direction == 'right') {
sliding = true;
slideIndex1++;
}
if (direction == 'left') {
sliding = true;
slideIndex1--;
}
}
if (index == 2) {
if (direction == 'right') {
sliding = true;
slideIndex2++;
}
if (direction == 'left') {
sliding = true;
slideIndex2--;
}
}
if (index == 3) {
if (direction == 'right') {
sliding = true;
slideIndex3++;
}
if (direction == 'left') {
sliding = true;
slideIndex3--;
}
}
if (index == 4) {
if (direction == 'right') {
sliding = true;
slideIndex4++;
}
if (direction == 'left') {
sliding = true;
slideIndex4--;
}
}
if (index == 5) {
if (direction == 'right') {
sliding = true;
slideIndex5++;
}
if (direction == 'left') {
sliding = true;
slideIndex5--;
}
}
}
});
});
HTML:
<div id="fullpage">
<div class="section" id="section1">
<div class="slide"> A-1 </div>
<div class="slide"> A-2 </div>
<div class="slide"> A-3 </div>
<div class="slide"> A-4</div>
</div>
<div class="section" id="section2">
<div class="slide"> B-1 </div>
<div class="slide"> B-2 </div>
<div class="slide"> B-3 </div>
<div class="slide"> B-4 </div>
</div>
<div class="section" id="section3">
<div class="slide"> C-1 </div>
<div class="slide"> C-2 </div>
<div class="slide"> C-3 </div>
<div class="slide"> C-4 </div>
</div>
<div class="section" id="section4">
<div class="slide"> D-1 </div>
<div class="slide">D-2 </div>
<div class="slide"> D-3 </div>
<div class="slide"> D-4 </div>
</div>
<div class="section" id="section5">
<div class="slide"> E-1 </div>
<div class="slide"> E-2 </div>
<div class="slide"> E-3 </div>
<div class="slide"> E-4 </div>
</div>
</div>