Пагинатор – это механизм постраничного вывода информации.
Например страницы с товарами, пользователями или любого контента, содержание которого неоправданно займет много места на одной страницы и его можно разбить на несколько.
Используя конструкцию описанную ниже, вы получите визуально понятный пользователю блок пагинации.
Стандартный пагинатор
Стандартный пагинатор представляет собой набор номеров страниц с активным элементом
.selected
<div class="ob-block-stepper">
<a class="selected" href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
</div>
Пример
Пагинатор с дополнительной навигацией
Данный пагинатор отличается от стандартного дополнительными кнопками "Prev" и "Next", который осуществляют навигацию вперед и назад.
Для отображения стрелки влево необходимо использовать -
‹
Для отображения стрелки вправо необходимо использовать -
›
<div class="ob-block-stepper">
<a href="#">‹ Prev</a>
…
<a class="selected" href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
…
<a href="#">Next ›</a>
</div>
Пример