Fullpage.js Прокрутка слайдов с помощью колесика мыши
Я использую Fullpage.js для горизонтальной и вертикальной прокрутки. У меня есть 5 разделов, каждый из которых содержит 4 слайда.
Я реализую решение из этого вопроса: Fullpage.js Слайд по горизонтали на прокрутке
За исключением того, что у меня есть 4 слайда в каждом разделе, которые мне нужно просмотреть. Каждый слайд работает при прокрутке мышью, за исключением самого последнего раздела (раздел 5). Любая идея о том, почему последний раздел не будет прокручивать слайды?
Код здесь: 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>