Навигация "Предыдущий" и "Следующий"

• Использование
• Позиция Slidenav
• Slidenav и Слайд-шоу

Использование

Чтобы создать навигацию с помощью кнопок «предыдущий» и «следующий», просто добавьте класс .uk-slidenav к элементам <a>. Добавьте класс .uk-slidenav-previous или .uk-slidenav-next, чтобы стилизовать элементы навигации как «предыдущий» и «следующий» или же «назад» и «вперед».

Пример

<a href="" class="uk-slidenav uk-slidenav-previous"></a>
<a href="" class="uk-slidenav uk-slidenav-next"></a>

Позиционирование Slidenav

Чтобы разместить Slidenav над любым содержимым, таким как слайд-шоу или изображение, просто оберните навигацию и необходимое содержимое внутри элемента контейнера добавив класс .uk-slidenav-position. Таким образом, кнопки «предыдущая» и «следующая» будут центрированы вертикально и выровнены влево и вправо.

Примечание Slidenav будет виден только при наведении курсора на контент.

<div class="uk-slidenav-position">
    <img src="" alt="">
    <a href="" class="uk-slidenav uk-slidenav-previous"></a>
    <a href="" class="uk-slidenav uk-slidenav-next"></a>
</div>

Навигация "Предыдущий" и "Следующий" в режиме слайд-шоу

Для лучшей видимости изображений, например, при использовании slidenav в качестве навигации в режиме слайд-шоу, просто добавьте класс .uk-slidenav-contrast.

<a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous"></a>
<a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next"></a>

<link rel="stylesheet" href="/../css/components/slidenav.min.css">