fullPage.js Skeleton

This is just a skeleton of fullPage.js, you can fork it and add you desire code so you can show your code easily.

HTML

<link rel="stylesheet" href="http://alvarotrigo.com/fullPage/jquery.fullPage.css">
<link rel="stylesheet" href="http://alvarotrigo.com/fullPage/example3.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/vendors/jquery.easings.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
<body>
    <div id="fullpage">
        <div class="section" id="section0">
             <h2>B A N N E R</h2>

             <h3>Tagline</h3>

        </div>
        <div class="section" id="section1">
            	<h2>Section 1</h2>

             <h3>Placeholder</h3>

        </div>
        <div class="section" id="section2">
            	<h2>Section 2</h2>

             <h3>Placeholder</h3>

        </div>
        <div class="section" id="section3">
            	<h2>Section 3</h2>

             <h3>Placeholder</h3>

        </div>
        <div class="section" id="section4">
            	<h2>Section 4</h2>

             <h3>Placeholder</h3>

        </div>
    </div>
</body>

CSS

#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span {
    background: #004e7b;
    position: absolute;
}
#fp-nav ul li a span, .fp-slidesNav ul li a span {
    border: 1px solid #004e7b;
    background: rgba(0, 0, 0, 0);
    height: 8px;
    width: 8px;
    border-radius: 50%;
}
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span,
#fp-nav ul li a.active span, 
.fp-slidesNav ul li a.active span, 
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
    width: 8px;
    height: 8px;
    margin: -2px 0 0 -2px;
}

JavaScript

$(document).ready(function () {
    $('#fullpage').fullpage({
        css3: true,
        navigation: true,
        navigationPosition: 'right',
        keyboardScrolling: true,
        controlArrows: true
    });
});