Для получения полного доступа
зарегистрируйтесь

fullPage.js — jQuery-плагин для постраничной прокрутки


При не сложной структуре разметки, вы можете создавать одностраничные сайты — которые хорошо смотрятся для презентации продукта, услуги.

Чтобы понять о чём речь, смотри демо

Подключаю нужные скрипты:

<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>
<script src="vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>


Скелет страницы:

<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>


Если вам понадобиться слайдер внутри секции, достаточно прописать в нужной секции код такого вида:

<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>


Осталось указать наш контейнер с секциями, чтобы всё заработало:

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

За подробной информации обращаемся к документации

Чтобы увидеть комментарии, нужно быть участником сообщества

Регистрация