Компонент 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>
    
    <hr>
    
    <div class="uk-slidenav-container uk-flex-center">
        <a class="uk-margin-small-right" uk-slidenav-previous></a>
        <a 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>
        <ul class="uk-slideshow-items">
            <li>
                <img src="/demo/img/photo.jpg" alt="slideshow" uk-cover>
            </li>
            <li>
                <img src="/demo/img/dark.jpg" alt="slideshow" uk-cover>
            </li>
            <li>
                <img src="/demo/img/light.jpg" alt="slideshow" uk-cover>
            </li>
        </ul>
        <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>

Slidenav