我正在使用Fullpage.js进行水平和放大垂直滚动。我有5个部分,每个部分包含4个幻灯片。
我正在从这个问题实施解决方案: Fullpage.js Slide horizontal on scroll
除了我在每个部分都有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>