fullPage.js slide fade

https://github.com/alvarotrigo/fullPage.js/issues/1304

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css">
<div id="fullpage">
	<div class="section" id="section1">
	    <div class="slide" id="slide1">
        <h1>Index</h1>
        <button class="button1">
          Slide 1
        </button>
        <button class="button2">
          Slide 2
        </button>
        <button class="button3">
          Slide 3
        </button>
       </div>
	    <div class="slide" id="slide2"><h1>First Slide</h1></div>
      <div class="slide" id="slide3"><h1>Second Slide</h1></div>
      <div class="slide" id="slide4"><h1>Third Slide</h1></div>
	</div>
</div>

CSS

/* Style for our header texts
	* --------------------------------------- */
	h1{
		font-size: 5em;
		font-family: arial,helvetica;
		color: #fff;
		margin:0;
		padding:0;
	}

	/* Centered texts in each section
	* --------------------------------------- */
	.section{
		text-align:center;
	}


	/* Backgrounds will cover all the section
	* --------------------------------------- */
	.section{
		background-size: cover;
	}

	.slide{
		background-size: cover;
	}


 	/*Adding background for the slides
	* --------------------------------------- */
	#slide1{
		background-image: url(https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/examples/imgs/bg2.jpg);
		padding: 6% 0 0 0;
	}
	#slide2, #slide3, #slide4{
		background-image: url(https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/examples/imgs/bg5.jpg);
		padding: 6% 0 0 0;
	}


	/* Bottom menu
	* --------------------------------------- */
	#infoMenu li a {
		color: #fff;
	}

JavaScript

var SCROLLING_SPEED = 700;

$(document).ready(function() {
    $('#fullpage').fullpage({
        verticalCentered: false,
        anchors:['section1'],
      
        // fullPage.js settings for fading-in slides insead of scrolling them.
        // Disable or nullify scrolling of slides
        scrollingSpeed: SCROLLING_SPEED,
        
        // Hide the slides container before the next slide loads
        onSlideLeave: function(anchorLink, index, slideIndex, direction) {
            $.fn.fullpage.setScrollingSpeed(0);
            $('.fp-section').find('.fp-slidesContainer').hide();
        },
      
        // Display the slides container by fading it in after the next slide has been loaded.
        afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
            $('.fp-section').find('.fp-slidesContainer').fadeIn(700);
            $.fn.fullpage.setScrollingSpeed(SCROLLING_SPEED);
        }
        
   	 });
});

$(document).ready(function(){

      $(".button1").click(function() {
      $.fn.fullpage.moveTo('section1', 1); 
      $('.fp-section').find('.fp-slidesContainer').hide(); //hide current slide
    });
    
    $(".button2").click(function() {
      $.fn.fullpage.moveTo('section1', 2);
      $('.fp-section').find('.fp-slidesContainer').hide(); //hide current slide
    });
    
    $(".button3").click(function() {
      $.fn.fullpage.moveTo('section1', 3);
      $('.fp-section').find('.fp-slidesContainer').hide(); //hide current slide
    });


});