Слияние кода завершено, страница обновится автоматически
Поддержка старых браузеров и тех, которые её не имеют, делает его идеальным для обеспечения совместимости.
Он также обеспечивает поддержку сенсорных экранов для мобильных телефонов, планшетов и компьютеров с тачскрином.
Отдельное спасибо Browserstack за поддержку fullpage.js.
Как вы можете видеть в примерах файлов, вам потребуется включить:
jquery.fullPage.js (или его минимизированную версию jquery.fullPage.min.js)jquery.fullPage.css
Опционально, при использовании css3:false, вы можете добавить библиотеку jQuery UI в случае, если хотите использовать другие эффекты замедления, кроме включённых в библиотеку jQuery (linear и swing) или включённого по умолчанию в fullPage.js (easeInOutCubic).
Опционально вы можете установить fullPage.js с помощью bower или npm, если предпочитаете:
Терминал:
// С помощью bower
bower install fullpage.js
// С помощью npm
npm install fullpage.js
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Эта следующая строка опциональна. Необходима только в том случае, если вы используете опцию css3:false и хотите использовать другие эффекты замедления вместо «linear», «swing» или «easeInOutCubic». -->
<script src="vendors/jquery.easings.min.js"></script>
<!-- Эта следующая строка необходима только в случае использования опции `scrollOverflow:true` -->
<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>
Если вы предпочитаете использовать CDN для загрузки необходимых файлов, fullPage.js находится на CDNJS: https://cdnjs.com/libraries/fullPage.js
Начните свой HTML-документ с обязательного объявления типа документа HTML (HTML DOCTYPE) в первой строке вашего HTML-кода. В противном случае у вас могут возникнуть проблемы с высотой разделов. В приведённых примерах используется HTML 5 doctype <!DOCTYPE html>.
Каждый раздел будет определён элементом, содержащим класс section.
Активный раздел по умолчанию будет первым разделом, который принимается за домашнюю страницу.
Разделы должны быть помещены внутрь оболочки (<div id="fullpage"> в данном случае). Оболочка не может быть элементом body.
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
Если вы хотите определить другую отправную точку, отличную от первого раздела или первого слайда раздела, просто добавьте класс active к разделу и слайду, который вы хотите загрузить первым.
<div class="section active">Some section</div>
Чтобы создать слайдер ландшафта внутри раздела, каждый слайд будет определён по умолчанию элементом, содержащим класс slide:
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
<div class="slide"> Slide 4 </div>
</div>
Вы можете увидеть полностью работающий пример структуры HTML в файле demoPage.html.
Всё, что вам нужно сделать, это вызвать fullPage.js внутри функции $(document).ready:
$(document).ready(function() {
$('#fullpage').fullpage();
});
Более сложная инициализация со всеми установленными параметрами может выглядеть следующим образом:
$(document).ready(function() {
$('#fullpage').fullpage({
//Navigation
menu: '#menu',
lockAnchors: false,
anchors:['firstPage', 'secondPage'],
navigation: false,
navigationPosition: 'right',
navigationTooltips: Уберите ограничение по высоте для разделов и слайдов. Можно создавать разделы, высота которых меньше или больше окна просмотра. Это идеально подходит для нижних колонтитулов.
Важно понимать, что не имеет смысла использовать эту функцию для всех разделов. Если на начальной загрузке сайта есть более одного раздела, fullPage.js вообще не будет прокручивать, чтобы увидеть следующий раздел, так как он уже будет в окне просмотра.
Чтобы создать меньшие разделы, просто используйте класс `fp-auto-height` в разделе, к которому вы хотите его применить. Тогда он будет иметь высоту, определённую содержимым вашего раздела/слайда.
#### Адаптивные разделы с автоматической высотой
Адаптивную автоматическую высоту можно применить, используя класс `fp-auto-height-responsive`. Таким образом, разделы будут полной высоты до тех пор, пока не сработает адаптивный режим.
### Классы состояния, добавленные fullpage.js
Fullpage.js добавляет несколько классов в разные элементы для отслеживания статуса сайта:
- `active` добавляется к текущему видимому разделу и слайду.
- `active` добавляется к текущему элементу меню (если используется опция `menu`).
- Класс вида `fp-viewing-SECTION-SLIDE` добавляется к элементу `body` сайта. (например: [`fp-viewing-secondPage-0`](http://alvarotrigo.com/fullPage/#secondPage)). Части `SECTION` и `SLIDE` будут якорями (или индексами, если якорь не указан) текущего раздела и слайда.
- `fp-responsive` добавляется к `body`, когда сайт переходит в адаптивный режим
- `fp-enabled` добавляется к `html`, когда fullpage.js включён. (и удаляется при уничтожении).
- `fp-destroyed` добавляется в контейнер fullpage.js, когда fullPage.js уничтожен.
- `fp-enabled` добавляется к `html` после инициализации библиотеки.
### Ленивая загрузка
[Демо](http://codepen.io/alvarotrigo/pen/eNLBXo) fullPage.js предоставляет способ ленивой загрузки изображений, видео и аудиоэлементов, чтобы они не замедляли загрузку сайта и не тратили впустую передачу данных.
При использовании ленивой загрузки все эти элементы будут загружаться только при входе в окно просмотра.
Чтобы включить ленивую загрузку, всё, что вам нужно сделать, это изменить атрибут `src` на `data-src`, как показано ниже:
Если вы уже используете другое решение для ленивой загрузки, которое также использует data-src, вы можете отключить ленивую загрузку fullPage.js, установив опцию lazyLoading: false.
Примечание: функция автовоспроизведения может не работать на некоторых мобильных устройствах в зависимости от ОС и браузера (например, Safari на iOS версии < 10.0).
Использование атрибута autoplay для видео или аудио или параметра autoplay=1 для Youtube iframes приведёт к воспроизведению медиаэлемента при загрузке страницы.
Вместо этого для воспроизведения при загрузке раздела или слайда используйте атрибут data-autoplay. Например:
<audio data-autoplay>
<source src="http://metakoncept.hr/horse.ogg" type="audio/ogg">
</audio>
Встроенные HTML5 <video> / <audio> и Youtube iframes автоматически приостанавливаются, когда вы переходите от раздела или слайда. Это можно отключить с помощью атрибута data-keepplaying. Например:
<audio data-keepplaying>
<source src="http://metakoncept.hr/horse.ogg" type="audio/ogg">
</audio>
fullpage.js предоставляет набор расширений, которые вы можете использовать для улучшения его стандартных функций. Все они перечислены как опции fullpage.js.
Расширения требуют использования минифицированного файла jquery.fullpage.extensions.min.js, который находится в папке [dist]. Вместо обычного файла fullPage.js (jquery.fullpage.js или jquery.fullpage.min.js) используется файл расширения folder](https://github.com/alvarotrigo/fullPage.js/tree/master/dist).
После того как вы получите файл расширения, вам нужно будет добавить его перед fullPage. Например, если я хочу использовать расширение Continuos Horizontal, я бы включил файл расширения и затем версию файла расширения fullPage.
<script type="text/javascript" src="fullpage.continuousHorizontal.min.js"></script>
<script type="script type="text/javascript" src="fullpage/jquery.fullpage.extensions.min.js"></script>
Для каждого расширения потребуются ключ активации и лицензионный ключ. Подробнее об этом читайте здесь.
Затем вы сможете использовать и настраивать их, как описано в параметрах.
controlArrows: (по умолчанию true) Определяет, будут ли использоваться стрелки управления для перемещения слайдов вправо или влево.
verticalCentered: (по умолчанию true) Вертикальное центрирование содержимого внутри разделов. Когда установлено значение true, ваше содержимое будет заключено в библиотеку. Рассмотрите возможность использования делегирования или загрузите другие скрипты в обратном вызове afterRender.
scrollingSpeed: (по умолчанию 700) Скорость в миллисекундах для переходов прокрутки.
sectionsColor: (по умолчанию none) Определите свойство CSS background-color для каждого раздела. Пример:
$('#fullpage').fullpage({
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});
anchors: (по умолчанию []) Определяет ссылки привязки (#example), которые будут отображаться в URL для каждого раздела. Значения якорей должны быть уникальными. Положение якорей в массиве определит, к каким разделам применяется якорь. (вторая позиция для второго раздела и так далее). С помощью якорей также можно будет осуществлять навигацию вперёд и назад через браузер. Этот параметр также позволяет пользователям добавлять закладки на определённый раздел или слайд. Будьте осторожны! Якоря не могут иметь то же значение, что и любой элемент ID на сайте (или элемент NAME для IE). Теперь якоря можно определить непосредственно в структуре HTML с помощью атрибута data-anchor, как объясняется здесь.
lockAnchors: (по умолчанию false) Определяет, будут ли якоря в URL вообще влиять на библиотеку. Вы всё ещё можете использовать якоря внутри своих функций и обратных вызовов, но они не будут влиять на прокрутку сайта. Полезно, если вы хотите объединить fullPage.js с другими плагинами, использующими якоря в URL.
Важно Полезно понимать, что значения в массиве параметров anchors напрямую коррелируют с элементом с классом .section по его положению в разметке.
easing: (по умолчанию easeInOutCubic) Определяет эффект перехода для вертикальной и горизонтальной прокрутки. Требуется файл vendors/jquery.easings.min.js или jQuery UI для использования некоторых из его переходов. Вместо этого можно использовать другие библиотеки.
easingcss3: (по умолчанию ease) Определяет эффект перехода в случае использования css3:true. Можно использовать предопределённые (например, linear, ease-out...) или создать свои собственные с помощью функции cubic-bezier. Возможно, вы захотите использовать инструмент анимации замедления CSS Matthew Lein для этого.
loopTop: (по умолчанию false) Определяет, должна ли прокрутка вверх в первом разделе прокручиваться до последнего или нет.
loopBottom: (по умолчанию false) Определяет, должна ли прокрутка вниз в последнем разделе прокручиваться к первому или нет.
loopHorizontal: (по умолчанию true) Определяет, должны ли горизонтальные ползунки зацикливаться после достижения последнего или предыдущего слайда или нет.
css3: (по умолчанию true). Определяет, следует ли использовать JavaScript или преобразования CSS3 для прокрутки внутри разделов и слайдов. Полезно для ускорения движения на планшетах и мобильных устройствах с браузерами, поддерживающими эту функцию. fullpage.js
Определяет, будет ли перемещение одного горизонтального слайдера вызывать перемещение слайдеров в других секциях в том же направлении. Возможные значения: true, false или массив с заблокированными секциями. Например, [1, 3, 5], начиная с 1. Требуется fullpage.js версии 2.8.3 и выше.
dragAndMove: (по умолчанию false) расширение fullpage.js. Включает или отключает перетаскивание секций и слайдов с помощью мыши или пальцев. Возможные значения: true, false, fingersonly. Требуется fullPage.js версии 2.8.9 и выше.
offsetSections: (по умолчанию false) расширение fullpage.js. Позволяет использовать секции не на весь экран на основе процента. Идеально подходит для демонстрации посетителям большего содержания сайта, показывая часть следующей или предыдущей секции. Требуется fullPage.js версии 2.8.8 и выше.
Чтобы определить процент каждой секции, необходимо использовать атрибут data-percentage. Центрирование секции в области просмотра можно определить с помощью логического значения в атрибуте data-centered (по умолчанию — true, если не указано иное). Например:
<div class="section" data-percentage="80" data-centered="true">
resetSliders: (по умолчанию false) расширение fullpage.js. Определяет, следует ли сбрасывать каждый слайдер после выхода из его секции. Требуется fullpage.js версии 2.8.3 и выше.
fadingEffect: (по умолчанию false) расширение fullpage.js. Определяет, использовать ли эффект затухания вместо эффекта прокрутки по умолчанию. Возможные значения: true, false, sections, slides. Поэтому его можно применять только вертикально или горизонтально, либо к обоим одновременно. Требуется fullpage.js версии 2.8.6 и выше.
animateAnchor: (по умолчанию true) определяет, будет ли загрузка сайта при заданном якоре (#) прокручиваться с анимацией до места назначения или будет напрямую загружаться в заданную секцию.
recordHistory: (по умолчанию true) определяет, следует ли помещать состояние сайта в историю браузера. Если установлено значение true, каждая секция/слайд сайта будет действовать как новая страница, а кнопки «назад» и «вперёд» браузера будут прокручивать секции/слайды для достижения предыдущего или следующего состояния сайта. Если установлено значение false, URL будет меняться, но не повлияет на историю браузера. Эта опция автоматически отключается при использовании autoScrolling: false.
menu: (по умолчанию false) селектор можно использовать для указания меню, которое будет связано с секциями. Таким образом, прокрутка секций активирует соответствующий элемент в меню с использованием класса active. Это не создаст меню, а просто добавит класс active к элементу в данном меню с соответствующими якорными ссылками. Чтобы связать элементы меню с секциями, потребуется HTML 5 data-tag (data-menuanchor), который будет использоваться с теми же якорными ссылками, что и в секциях. Пример:
<ul id="myMenu">
<li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
<li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
<li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
menu: '#myMenu'
});
Примечание: элемент меню должен быть размещён вне оболочки fullpage, чтобы избежать проблем при использовании css3: true. В противном случае он будет добавлен в body самим плагином.
navigation: (по умолчанию false) если установлено значение true, будет отображаться навигационная панель, состоящая из маленьких кружков.
navigationPosition: (по умолчанию none) может быть установлен на left или right и определяет положение, в котором будет показана навигационная панель (если она используется).
navigationTooltips: (по умолчанию []) определяет... Настройки плагина fullPage.js
tooltips to show для навигационных кругов, если они используются. Пример: navigationTooltips: ['firstSlide', 'secondSlide']. Вы также можете определить их с помощью атрибута data-tooltip в каждом разделе, если хотите.
showActiveTooltip: (по умолчанию false) показывает постоянную подсказку для активно просматриваемого раздела в вертикальной навигации.
slidesNavigation: (по умолчанию false) если установлено значение true, будет отображаться панель навигации, состоящая из маленьких кружков для каждого слайдера на сайте.
slidesNavPosition: (по умолчанию bottom) определяет положение панели навигации для слайдеров. Допускает значения top и bottom. Возможно, вы захотите изменить стили CSS, чтобы определить расстояние от верха или низа, а также любой другой стиль, такой как цвет.
scrollOverflow: (по умолчанию false) (несовместимо с IE 8) определяет, следует ли создавать прокрутку для раздела/слайда, если его содержимое больше его высоты. Когда установлено значение true, ваш контент будет заключён в плагин. Рассмотрите возможность использования делегирования или загрузите другие скрипты в обратном вызове afterRender.
В случае установки значения true требуется библиотека вендора scrolloverflow.min.js, и она должна быть загружена перед плагином fullPage.js. Например:
<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>
Чтобы предотвратить создание полосы прокрутки fullpage.js в определённых разделах или слайдах, используйте класс fp-noscroll. Например: <div class="section fp-noscroll">
scrollOverflowReset: (по умолчанию false) расширение fullpage.js. Когда установлено значение true, он прокручивает вверх содержимое раздела/слайда с полосой прокрутки при переходе к другому вертикальному разделу. Таким образом, раздел/слайд всегда будет показывать начало своего содержимого, даже если вы прокручиваете его из раздела под ним.
scrollOverflowOptions: когда используется scrollOverflow:true, fullpage.js будет использовать разветвлённую и модифицированную версию библиотеки iScroll.js libary. Вы можете настроить поведение прокрутки, предоставив fullpage.js нужные вам параметры iScroll.js. Подробнее см. в документации.
sectionSelector: (по умолчанию .section) определяет селектор jQuery, используемый для разделов плагина. Иногда его нужно изменить, чтобы избежать проблем с другими плагинами, использующими те же селекторы, что и fullpage.js.
slideSelector: (по умолчанию .slide) определяет селектор jQuery, используемый для слайдов плагина. Иногда его необходимо изменить, чтобы избежать проблемы с другими плагинами, которые используют те же селекторы, что и fullPage.js.
responsiveWidth: (по умолчанию 0) нормальная прокрутка (autoScrolling:false) будет использоваться при заданной ширине в пикселях. Класс fp-responsive добавляется к тегу body, если пользователь хочет использовать его для собственного адаптивного CSS. Например, если установлено значение 900, всякий раз, когда ширина браузера меньше 900, плагин будет прокручиваться как обычный сайт.
responsiveHeight: (по умолчанию 0) нормальная прокрутка (autoScrolling:false) будет использоваться при указанной высоте в пикселях. Класс fp-responsive добавляется к тегу body, если пользователь хочет использовать его для своего собственного адаптивного CSS. Например, если установлено значение 900, всякий раз, когда высота браузера меньше 900, плагин будет прокручиваться как обычный сайт.
responsiveSlides: (по умолчанию false) Расширение fullPage.js. При значении true слайды будут превращаться в вертикальные разделы при активации режима реагирования (используя параметры responsiveWidth или responsiveHeight, описанные выше). Требуется fullpage.js версии 2.8.5 или выше.
parallax: (по умолчанию false) Расширение fullPage.js. Определяет, следует ли использовать эффекты параллакса фона на разделах / слайдах. Подробнее о том, как применить параллакс. Опция Parallax (https://github.com/alvarotrigo/fullPage.js/wiki/Extension---Parallax):
parallaxOptions: (default: { type: 'reveal', percentage: 62, property: 'translate'}). Позволяет настроить параметры эффекта параллакса для фоновых изображений при использовании опции parallax:true. Подробнее о том, как применить опцию parallax, читайте здесь (https://github.com/alvarotrigo/fullPage.js/wiki/Extension---Parallax).
lazyLoading: (по умолчанию true) отложенная загрузка активна по умолчанию, что означает, что она будет отложенно загружать любой медиаэлемент, содержащий атрибут data-src, как подробно описано в документации по отложенной загрузке (https://github.com/alvarotrigo/fullPage.js#lazy-loading). Если вы хотите использовать другую библиотеку отложенной загрузки, вы можете отключить эту функцию fullpage.js.
Вы можете увидеть их в действии здесь (http://alvarotrigo.com/fullPage/examples/methods.html).
Демо Прокручивает один раздел вверх:
$.fn.fullpage.moveSectionUp();
Демо Прокручивает один раздел вниз:
$.fn.fullpage.moveSectionDown();
Демо Прокручивает страницу до заданного раздела и слайда. Первый слайд, видимый по умолчанию, будет иметь индекс 0.
/*Прокрутка к разделу с якорной ссылкой firstSlide и ко второму слайду*/
$.fn.fullpage.moveTo('firstSlide', 2);
//Что эквивалентно
$.fn.fullpage.moveTo(3, 0);
//Или
$.fn.fullpage.moveTo(3);
Демо
Точно так же, как moveTo (https://github.com/alvarotrigo/fullPage.js#movetosection-slide), но в этом случае прокрутка выполняется без анимации. Прямой переход к месту назначения.
/*Прокрутка к разделу с якорной ссылкой firstSlide и ко второму слайду */
$.fn.fullpage.silentMoveTo('firstSlide', 2);
Демо Прокручивает горизонтальный ползунок текущего раздела к следующему слайду:
$.fn.fullpage.moveSlideRight();
Демо Прокручивает горизонтальный ползунок текущего раздела к предыдущему слайду:
$.fn.fullpage.moveSlideLeft();
Демо Устанавливает конфигурацию прокрутки в реальном времени. Определяет способ поведения прокрутки страницы. Если установлено значение true, будет использоваться «автоматическая» прокрутка, в противном случае будет использоваться «ручная» или «нормальная» прокрутка сайта.
$.fn.fullpage.setAutoScrolling(false);
Демо Устанавливает значение параметра fitToSection, определяющего, следует ли подгонять раздел под размер экрана или нет.
$.fn.fullpage.setFitToSection(false);
Демо Прокручивается до ближайшего активного раздела, соответствующего размеру окна просмотра.
$.fn.fullpage.fitToSection();
Демо Устанавливает значение для параметра lockAnchors, определяя, будут ли якоря иметь какой-либо эффект в URL или нет.
$.fn.fullpage.setLockAnchors(false);
Демо Добавляет или удаляет возможность прокрутки разделов/слайдов с помощью колёсика мыши/трекпада или сенсорных жестов (что активно по умолчанию). Обратите внимание, это не отключит прокрутку клавиатуры. Вам нужно будет использовать setKeyboardScrolling для этого.
---
### onLeave (`index`, `nextIndex`, `direction`)
Этот обратный вызов срабатывает, когда пользователь покидает раздел, переходя к новому разделу.
Параметры:
* `index`: индекс покидаемого раздела. Начинается с 1.
* `nextIndex`: индекс целевого раздела. Начинается с 1.
* `direction`: будет принимать значения `up` или `down` в зависимости от направления прокрутки.
Пример:
```javascript
$('#fullpage').fullpage({
onLeave: function(index, nextIndex, direction) {
var leavingSection = $(this);
//после ухода из раздела 2
if (index == 2 && direction =='down') {
alert("Переход к разделу 3!");
}
else if (index == 2 && direction == 'up') {
alert("Переход к разделу 1!");
}
}
});
Вы можете отменить прокрутку, вернув false в обратном вызове onLeave:
$('#fullpage').fullpage({
onLeave: function(index, nextIndex, direction) {
//прокрутка не произойдёт, если целью является третий раздел
if(nextIndex == 3) {
return false;
}
}
});
Этот обратный вызов срабатывает сразу после создания структуры страницы. Это тот обратный вызов, который вы хотите использовать для инициализации других плагинов или запуска любого кода, требующего готовности документа (поскольку этот плагин изменяет DOM для создания результирующей структуры). Дополнительную информацию см. в FAQ.
Пример:
$('#fullpage').fullpage({
afterRender: function() {
var pluginContainer = $(this);
alert("Результирующая структура DOM готова");
}
});
Этот обратный вызов срабатывает после изменения размера окна браузера. Сразу после изменения размеров разделов.
Пример:
$('#fullpage').fullpage({
afterResize: function() {
var pluginContainer = $(this);
alert("Разделы закончили изменение размера");
}
});
isResponsive)Этот обратный вызов срабатывает после того, как fullpage.js переходит из обычного режима в адаптивный или из адаптивного режима в обычный режим.
Параметры:
isResponsive: логическое значение, определяющее, входит ли он в адаптивный режим (true) или возвращается в нормальный режим (false).Пример:
$('#fullpage').fullpage({
afterResponsive: function(isResponsive) {
alert("Является адаптивным: " + isResponsive);
}
});
anchorLink, index, slideAnchor, slideIndex)Обратный вызов срабатывает после загрузки слайда раздела, после завершения прокрутки. Параметры:
anchorLink: anchorLink, соответствующий разделу.index: индекс раздела. Начинается с 1.slideAnchor: якорь, соответствующий слайду (если он есть).slideIndex: индекс слайда. Начинается с 1 (по умолчанию слайд не считается слайдом, а считается разделом).Если для слайда или слайдов не определены anchorLinks, следует использовать только параметр slideIndex.
Пример:
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) {
var loadedSlide = $(this);
//первый слайд второго раздела
if (anchorLink == 'secondPage' && slideIndex == 1) {
alert("Первый слайд загружен");
}
//второй слайд второго раздела (предполагая, что #secondSlide является
//якорем для второго слайда
if (index == 2 && slideIndex == 'secondSlide') {
alert("Второй слайд загружен");
}
}
});
anchorLink, index, slideIndex, direction, nextSlideIndex)Этот обратный вызов срабатывает, когда пользователь уходит со слайда, чтобы перейти к другому, при переходе к новому слайду. false отменит перемещение до того, как оно произойдёт.
Параметры:
— anchorLink: ссылка на якорь, соответствующая разделу.
— index: индекс раздела. Начинается с 1.
— slideIndex: индекс слайда. Начинается с 0.
— direction: принимает значения right или left в зависимости от направления прокрутки.
— nextSlideIndex: индекс целевого слайда. Начинается с 0.
Пример:
$('#fullpage').fullpage({
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex) {
var leavingSlide = $(this);
//покидаем первый слайд второго раздела вправо
if (index == 2 && slideIndex == 0 && direction == 'right') {
alert("Покидаем первый слайд!!");
}
//переходим к третьему слайду второго раздела влево
if (index == 2 && slideIndex == 2 && direction == 'left') {
alert("Переходим ко второму слайду!");
}
}
});
Вы можете отменить перемещение, вернув false в обратном вызове onSlideLeave. Аналогично отмене движения с помощью onLeave.
Пожалуйста, смотрите Вклад в fullPage.js.
Чтобы увидеть список последних изменений, см. раздел «Релизы».
Хотите собрать дистрибутивные файлы fullpage.js? Пожалуйста, смотрите Задачи сборки.
Если вы хотите, чтобы ваша страница была здесь указана. Пожалуйста, свяжитесь со мной по адресу alvaro@alvarotrigo.com с указанием URL.
Пожертвования
Пожертвования приветствуются :)
Лицензия
(The MIT License)
Copyright (c) 2013 Alvaro Trigo alvaro@alvarotrigo.com
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR... ИНЫЕ ОПЕРАЦИИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )