FULLPAGE: when reaching the last slide, do something

I'm using Fullpage on my portfolio page.

All I want to achieve is that when you reach the last slide, something happens.
I don't know what I am doing wrong.

Thanks in advance for any precious help.

$('#fullpage').fullpage({
controlArrowColor: "#000",
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex) {
    if (index === $('.fp-section.active .fp-slide').length) {
        window.location.href = "http://google.com"
    }
}
});
.section {
    text-align:center;
    font:10vw/1.2em -apple-system,BlinkMacSystemFont,sans-serif;
    background:#fff;
    letter-spacing:.1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<link href="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" rel="stylesheet"/>

<div id="fullpage">
    <div class="section">
        <div class="slide">ONE</div>
        <div class="slide">TWO</div>
        <div class="slide">THREE</div>
        <div class="slide">REDIRECT</div>
     </div>
</div>

1 answer

  • answered 2017-08-12 09:31 Terry

    Instead of accessing index, you should be accessing the nextSlideIndex. As per the documentation:

    • index refers to the index of the section. Starting from 1.
    • slideIndex refers to the index of the slide. Starting from 0.
    • nextSlideIndex refers to the index of the destination slide. Starting from 0. (And this is the one you want to check against)

      Note: index will always be 1 because you only have a single section on the page :)

    Since nextSlideIndex is a zero-based index, you should compare it to one minus the total length of the slides to know if you have reached the final slide.

    if (nextSlideIndex === $('.fp-section.active .fp-slide').length - 1) {
        // Final slide reached
        console.log('Final slide reached');
    }
    

    See proof-of-concept example:

    $('#fullpage').fullpage({
      controlArrowColor: "#000",
      onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex) {
        if (nextSlideIndex === $('.fp-section.active .fp-slide').length - 1) {
          // Final slide reached
          console.log('Final slide reached');
        }
      }
    });
    .section {
      text-align: center;
      font: 10vw/1.2em -apple-system, BlinkMacSystemFont, sans-serif;
      background: #fff;
      letter-spacing: .1em;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
    <link href="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" rel="stylesheet" />
    
    <div id="fullpage">
      <div class="section">
        <div class="slide">ONE</div>
        <div class="slide">TWO</div>
        <div class="slide">THREE</div>
        <div class="slide">REDIRECT</div>
      </div>
    </div>

    Update: If you want to perform the action after the slides have finished transitioning, I recommend listening to the afterSlideLoad callback:

    $('#fullpage').fullpage({
      controlArrowColor: "#000",
      afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
        if (slideIndex === $('.fp-section.active .fp-slide').length - 1) {
          // Final slide reached
          console.log('Final slide reached');
        }
      }
    });
    

    $('#fullpage').fullpage({
      controlArrowColor: "#000",
      afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
        if (slideIndex === $('.fp-section.active .fp-slide').length - 1) {
          // Final slide reached
          console.log('Final slide reached');
        }
      }
    });
    .section {
      text-align: center;
      font: 10vw/1.2em -apple-system, BlinkMacSystemFont, sans-serif;
      background: #fff;
      letter-spacing: .1em;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
    <link href="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" rel="stylesheet" />
    
    <div id="fullpage">
      <div class="section">
        <div class="slide">ONE</div>
        <div class="slide">TWO</div>
        <div class="slide">THREE</div>
        <div class="slide">REDIRECT</div>
      </div>
    </div>