0

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>
rolspace
  • 335
  • 1
  • 5
  • 11
Mia
  • 233
  • 4
  • 19
  • From the docs: `onLeave: This callback is fired once the user leaves a section, in the transition to the new section.` However 5 is the last section so there is no new section to satisfy this condition so the event never fires. – Matt Oct 09 '17 at 22:38
  • If you prefer to keep it simple, there's the [Continuous Horizontal extension](https://alvarotrigo.com/fullPage/extensions/scroll-horizontally.html) for that same purpose. Supported and maintained in case of fullpage.js updates or changes in the API or new extensions. – Alvaro Oct 09 '17 at 23:28

0 Answers0