CODEWITHSUNDEEP
jquerycssfullpage.js
Marian Rick
Marian Rick

Reputation: 3440

Full height slider skip one slide

I am using fullPage.js to create a full width and height slider for several fullscreen-slides. So my site structure is like

section#f01
section#f02
section#f03.scrollfix
section#f04

I want to skip section#f03.scrollfix while scrolling through the site. While scrolling with my keyboard and/or by my mouse wheel.

Upvotes: 9

Views: 1693

Answers (2)

Alvaro
Alvaro

Reputation: 41605

Demo online

If you want to remove it on load, then use the afterRender callback as I'm doing here:

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],

    afterRender: function () {
        removeSection2();
    }
});

function removeSection2() {
    // Move section 2 after the las section
    $('.fp-section:last').after($('#f02'));

    //removing the internal class `fp-section` so fullPage.js won't recognise it and won't be able to scroll to it.
    $('#f02').removeClass('fp-section');
}

In case you want to use it at any other moment, just call the function removeSection2 whenever you want.

If you want to restore it back at some point, you could use this other function:

function restoreSection2() {
    // Move all next sections to before the active section
    $('#f01').after($('#f02'));
    $('#f02').addClass('fp-section');
}

Upvotes: 5

Johan Persson
Johan Persson

Reputation: 2055

I'm not sure I got what you want to achieve, so this is how I choose to interpret what you wrote in your question:

In the live example that you provided, it is possible to click the button on each slide to "open up" that slide. When that is done, you want slide #8 to be skipped whenever the user is clicking the navigation buttons on the page, or is using the scroll button.

If this is the case, then adding the following listener for onLeave of a slide combined with the css in the bottom makes fullpage skip slide #8 whenever the class ".scrollfix" is present (maybe it ought to be renamed to ".scrollskip" or something similar):

$("#fullpage").fullpage({ onLeave: function(index, nextIndex, direction) {
  setTimeout(function() {
    var skip_section = $(".scrollfix").length > 0;
    if (nextIndex === 8 && skip_section) {
      if (direction === "down") {
        $("#fullpage").fullpage.moveSectionDown();
      } else {
        $("#fullpage").fullpage.moveSectionUp();
      }
    } 
  },1);
} })

The CSS needs to be updated to hide the slide completely instead of just making it invisible:

.scrollfix {
  display: none!important;
}

Pasting the JS code above into dev tools console while on your example page and making that small change to the scrollfix leads to the behavior I think you seek. Since you already have a "onLeave" event listener in your code, adding this fix in the dev tools will break the default behavior, but you should be able to add the code in the right place to have them both working at the same time.

Upvotes: 3

Related Questions