Как известно сайт может состоять не только из одной страницы, если у вас накопилось множество страниц, то нужно креативно организовать навигацию по ним, зачастую используют просто цифровую нумерацию, просто и гениально на один взгляд, но когда страниц очень много, то приходится переходить через десятки страниц в поисках необходимой, согласитесь, это не весьма удобно, но выход есть, можно создать постраничную навигацию с небольшой хитростью, а именно слайдером, который поможет с легкостью найти необходимую страничку.
Добавление набора стрелок существенно облегчает доступ к предыдущей и следующей страницам. И так, рассмотрим.
Шаг 1. HTML
Мы создаем разметку, содержащую ID и класс "sp-slider-wrapper" для вызова постраничного слайдера, кроме этого используем классы "sp-prev" и "sp-next", для навигации при помощи стрелок.
<div class="sp-slider-wrapper" id="slider"><nav><a class="sp-prev" href="#">Назад</a>
<a class="sp-next" href="#">Вперед</a></nav></div>С разметкой закончили перейдем к следующему шагу.
Шаг 2. JavaScript
Нам необходимо оживить, для этого нам необходимо вызвать функции для работы навигации. Делаем это с помощью следующего кода.
$(function() {
var $update = $( '#preview > span' );
$( "#slider" ).pagination( {
total : 100,
onChange : function( value ) {
$update.text( value );
}
} );
});Стили достаточно объемные, по этому нет смысла их выкладывать, просмотреть их можно в исходниках, кроме этого там все достаточно просто.
Вот и все. Готово!
Материал взят из зарубежного источника - tympanus.net/codrops/2012/12/21/slider-pagination-concept и представлен исключительно в ознакомительных целях.
