/ Scripts & jquery / Перемотка слайдами

Перемотка слайдами

HIT

03.05.2016

2728

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

Подумать как в мобильной версии отключать autoscrolling, параметром autoScrolling:false

Отключение fullpage

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

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

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

Будь осторожен! data-anchor теги не могут иметь то же значение, что и любой элемент ID на сайте (или элемент NAME для IE).

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

  • Похожие записи
  • Комментарии
  • Вложения
Рекомендации по созданию лэндинга

Рекомендации по созданию лэндинга

Лэндинг является довольно специфическим вариантом сайта, требующим учитывать множество нюансов. Разбираемся в особенностях верстки и функционирования лэндинга. Рекомендации по верстке лэндинга Мобильная версия лэндинга В мобильной версии особенно ощущается величина Читать далее »

Multi-page landing

Multi-page landing

Мультилендинг — это по сути лэндинг с изменяемыми частями контента в зависимости от запроса (рекламных объявления) фактического URL через который мы попадаем на него. Могут меняться заголовки, изображения, целые блоки Читать далее »

Создаем анимацию Scroll Down

Создаем анимацию Scroll Down

Для лэндингов часто используют анимацию в виде стрелки или колесика мышки, чтобы показать что можно (нужно) листать ниже. Создадим подобную анимацию с помощью css и jquery. Анимация колесика мышки Создадим Читать далее »

/

Добавить комментарий

Пока нет комментариев. Будь первым!

Перемотка слайдами
Защита сайта от копирования
Рекомендации для васЗащита сайта от копированияOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.