Pабота со скриптами. Урок 19. Скролл слайдами

Скрипт, позволяющий прокручивать сайт страницами или блоками очень востребован в лендингах и сайтах с структурированной блочной подачей информации.
С такой задачей сталкивалась и использовала этот скрипт https://github.com/lukehaas/Scrollify
Здесь Demo
В видео автор предлагает использовать другой скрипт  fullPage.js
Ссылка на гитхаб https://github.com/alvarotrigo/fullPage.js
Команда для установки через bower

$ bower install fullpage.js

Подключение стилей

<link rel="stylesheet" href="bower_components/fullpage.js/jquery.fullPage.css">

Стили выравнивают слайды по центру страницы

Подключение js

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery.easing/jquery.easing.min.js"></script>
<script src="bower_components/fullpage.js/dist/jquery.fullpage.min.js"></script>
<script src="js/custom.js"></script>

Инициализация скрипта в custom.js

$(document).ready(function() {
         $('#js-fullpage').fullpage();
});

Чтобы скрипт работал, каждому блоку нужно добавить id="#js-fullpage"

Настройки

$(function() {

    $('#js-fullpage').fullpage({
        menu: '#js-menu',
        anchors:['firstPage', 'secondPage', 'thirdPage'], // названия слайдов, появляются при наведении на кнопки
        navigation: true, // наличие навигации - кнопки-индикаторы прокрутки справа
        navigationPosition: 'right', // навигация справа или слева
        css3: true,
        easing: 'easeInBounce',
        scrollingSpeed: 700, // время прокрутки каждого слайда в мс
        scrollBar: true, // полоса прокрутки сбоку
        easingcss3: 'ease',
        loopBottom: false, // зацикливание слайда - после последнего внизу переходить на первый вверху
        loopTop: false, // зацикливание слайда - после последнего вверху переходить на первый внизу
        sectionSelector: '.js-section', // разметка секции, здесь мы изменили id js-section на класс
        verticalCentered: true, // центрирование по вертикали
    });

});