Для главной страницы, либо для страницы лэндинга иногда требуется перемотка слайдами (перемотка к следующему экрану).
Есть отличная реализации данного функционала — fullPage.js-master.

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

Подключаем скрипт и стиль fullPage

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/jquery.fullpage.min.css" />
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.fullPage.min.js"></script>

Далее инициализируем функционал fullPage

<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({

css3:false, //Для реализации background-attachment: fixed;

sectionsColor: ['green', 'blue', 'yellow', 'pink', 'coral', 'skyblue'], //добавление слайдам цветов

//anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', '5thpage', 'lastPage'], //хештэги в адрессной строке

scrollingSpeed: 1500,

slidesNavigation: true, // Горизонтальная навигация слайдов

scrollBar: true, // Показать скроллбар

//scrollOverflow: true, // Скроллинг внутри слайда, если содержимое не вместилось. !Нужен скрипт: jquery.slimscroll.min.js
navigation: true,
navigationPosition: 'right',
navigationTooltips: ['First page', 'Second page', '3rdPage', '4thpage', '5thpage', 'lastPage']

});

});
</script>

В сносках все расписано, какая строка управления за что отвечает.

Верстка слайдов

Все слайды должны быть внутри контейнера

<div id="fullpage">Все слайды</div>

Для прилепленной шапки или прилепленного футера нужно их ставить перед div id=»fullpage».

Каждый слайд должен быть размечен так (выделено жирным) остальное по вкусу. section — общий класс, id — индивидуальный.

<div class="section" id="section0">

<div align="center" class="wrapper" style="margin-top: -75px; z-index: 2; position: relative;">
<div class="wrapper-2">
Содержимое слайда
</div>
</div>

</div>

Можно создавать слайды с горизонтальной прокруткой, верстка будет следующей

<div class="section" id="section1">
<div class="slide" id="slide1"><h1>Slide Backgrounds</h1></div>
<div class="slide" id="slide2"><h1>Totally customizable</h1></div>
</div>

Особенности и нюансы

Для каждого слайда можно задать background-image и background-size: cover, background-iattachment: fixed; — можно использовать если в настройках fullpage указан параметр css3:false.

Если содержимое слайдов не умещается в область экрана, то можно включить дополнительный скроллинг внутри слайда параметром scrollOverflow: true и подключение скрипта jquery.slimscroll.min.js. Но внутренний скроллинг работает не вполне адекватно.

Отключение fullpage

Данный функционал можно/нужно отключить в мобильной версии

if ($(window).width() < 800) {
	$.fn.fullpage.destroy();
}

Ошибка перемотки

Поделиться в соц. сетях: