Компонент Slidenav

Навигация с кнопками "Предыдущий" и "Следующий" для переключения слайдера или слайд-шоу. Контейнер навигации. Позиция как наложение.

Определяет навигацию с кнопками "Предыдущий" и "Следующий" для переключения слайд-шоу.

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

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

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

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

Модификатор «Large»

Чтобы увеличить размер иконок slidenav, добавьте класс .uk-slidenav-large.

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

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

Контейнер

Контейнер «Slidenav»

Чтобы отобразить совместный slidenav, оберните slidenav-элементы внутри элемента <div> и добавьте класс .uk-slidenav-container. Также, для удобного расположения можно добавить один из классов .uk-position-* компонента Позиционирование. 

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

<div class="uk-slidenav-container">
    <a href="#" uk-slidenav-previous></a>
    <a href="#" uk-slidenav-next></a>
</div>
<div class="uk-slidenav-container uk-flex-center">
    <a href="#" class="uk-margin-small-right" uk-slidenav-previous></a>
    <a href="#" class="uk-margin-small-left" uk-slidenav-next></a>
</div>

Позиция как наложение

Чтобы разместить slidenav сверху элемента или, например, при использовании компонента Слайд-шоу, просто добавьте один из классов .uk-position-* из компонента Позиционирование. Чтобы создать контекст позиции в контейнере, добавьте класс .uk-position-relative.

Используйте класс .uk-light или .uk-dark из компонента Инверсия, чтобы применить светлый или темный цвет для лучшей видимости. 

<div class="uk-position-relative uk-light">

    <!-- Здесь содержимое, а навигация окажется сверху -->

    <a class="uk-position-center-left" href="" uk-slidenav-previous></a>
    <a class="uk-position-center-right" href="" uk-slidenav-next></a>

</div>
Примечание Вы также можете применить компонент Классы видимости, чтобы slidenav появлялся только при наведении курсора.
slideshow
slideshow
slideshow 
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow>
	
    <div class="uk-slideshow-items">
        <div>
            <img src="images/photo.webp" alt="slideshow" loading="lazy" uk-cover>
        </div>
        <div>
            <img src="images/dark.webp" alt="slideshow" loading="lazy" uk-cover>
        </div>
        <div>
            <img src="images/light.webp" alt="slideshow" loading="lazy" uk-cover>
        </div>
    </div>
    
    <a class="uk-slidenav-large uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-slidenav-large uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>