Для главной страницы, либо для страницы лэндинга иногда требуется перемотка слайдами (перемотка к следующему экрану).
Есть отличная реализации данного функционала — 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();
}