<div id="callbacks-placeholder"></div>


<div id="fullpage">
    <div class="section">One</div>
    <div class="section">
       <div class="slide" data-anchor="slide1">Two 1</div>
        <div class="slide" data-anchor="slide2">Two 2</div>
    </div>
    <div class="section">Three</div>
    <div class="section">Four</div>
</div>

.section {
  text-align:center;
  font-size: 3em;
}
#callbacks-placeholder{
  position:fixed;top:50px;left:50px;color:black;z-index:999;
}

var deleteLog = false;
var placeHolder = $('#callbacks-placeholder');

new fullpage('#fullpage', {
  v2compatible: false,
  anchors: ['page1', 'page2', 'page3', 'page4'],
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
  anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
  responsiveWidth: 600,
  beforeLeave: function(origin, destination, direction, trigger){
    if (deleteLog) {
      placeHolder.html('');
    }
    placeHolder.append('<p>beforeLeave - origin:' + origin.index + ' destination:' + destination.index + ' direction:' + direction + '  trigger:' + trigger + '</p>')
  },

  onLeave: function(origin, destination, direction, trigger) {
    placeHolder.append('<p>onLeave - origin:' + origin.index + ' destination:' + destination.index + ' direction:' + direction + '  trigger:' + trigger + '</p>')
  },
  onSlideLeave: function(section, origin, destination, direction, trigger) {
    if (deleteLog) {
      placeHolder.html('');
    }
    placeHolder.append('<p>onSlideLeave - section:' + section.index + ' origin:' + origin.index + ' destination:' + destination.index + ' direction:' + direction + '  trigger:' + trigger + '</p>');
  },
  afterRender: function() {
    placeHolder.append('<p>afterRender</p>');;
  },
  afterResize: function() {
    placeHolder.append('<p>afterResize</p>');
  },
  afterSlideLoad: function(section, origin, destination, direction, trigger) {
    placeHolder.append('<p>afterSlideLoad - section:' + section.index + ' origin:' + origin.index + ' destination:' + destination.index + ' direction:' + direction + '  trigger:' + trigger + '</p>');
    deleteLog = true;
  },
  afterLoad: function(origin, destination, direction, trigger) {
    if(origin){
      placeHolder.append('<p>afterLoad - origin:' + origin.index + ' destination:' + destination.index+ ' direction:' + direction + '  trigger:' + trigger + '</p>');
    }
    deleteLog = true;
  },
  afterResponsive: function(isResponsive){
    placeHolder.append('<p>afterResponsive - isResponsive:' +isResponsive + '</p>');
  }
});