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>

0 ответов

Другие вопросы по тегам