fullPage.js vertical navigation arrows

by Kirubel Girma

HTML

<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<link rel="stylesheet" href="https://rawgit.com/jackmu95/fullPage.js/master/jquery.fullPage.css">
<div id="fullpage">
    <div class="section">
        <h1>Navigation with arrows</h1>
        <p>An easy and beautiful way to navigate throw the sections</p>
    </div>

    <div class="section">
        <h1>Clickable</h1>
        <p>You can even click on the navigation and jump directly to another section.</p>
    </div>

    <div class="section">
        <h1>Enjoy it!</h1>
    </div>
</div>

CSS

/* Section styles */
.section {
    text-align: center;
}

.section h1,
.section p {
    color: #333333;
    margin: 0;
}

/* Navigation arrow styles */
#fp-nav span.prev,
#fp-nav span.next {
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
    vertical-align: center;
    display: table-cell;
    text-align: center;
    position: relative;
    cursor: pointer;
    padding: 5px 0;
    height: 20px;
    width: 10px;
}

#fp-nav span.inactive {
    cursor: default;
    opacity: 0.25;
}

JavaScript

$(function() {
    // Initialize fullPage
    $('#fullpage').fullpage({
        navigation: true,
        navigationTooltips: ['First section', 'Second section', 'Third section'],
        sectionsColor: ['#f1c40f', '#e67e22', '#c0392b'],
        onLeave: function(index, nextIndex, direction) {
            // Remove the inactive class from all arrows
            $('#fp-nav > span').removeClass('inactive');

            // Add inactive class if needed
            if (nextIndex == 1) {
                $('#fp-nav > span.prev').addClass('inactive');
            } else if (nextIndex == $('.fp-section').length) {
                $('#fp-nav > span.next').addClass('inactive');
            }
        }
    });

    // Add previous and next arrows to the fullPage navigation
    $('#fp-nav').prepend('<span class="prev inactive">&#8593;</span>')
            .append('<span class="next">&#8595;</span>');

    // Re-center the fullPage navigation
    $('#fp-nav').css({ 'margin-top': '-' + ($('#fp-nav').height() / 2) + 'px' });

    // Add actions to the arrows
    $('#fp-nav').find('span.prev, span.next').on('click', function() {
        if ($(this).hasClass('prev')) {
            $.fn.fullpage.moveSectionUp();
        } else {
            $.fn.fullpage.moveSectionDown();
        }
    });
});