Навигация слайдера

Определяет навигационные кнопки вперед и назад для пролистывания слайд-шоу.

Как использовать

Для создания навигационных кнопок вперед и назад, добавьте атрибут uk-slidenav к элементу <a>. Добавьте параметр 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>

Модификатор увеличения

Чтобы увеличить размер навигационных кнопок, добавьте класс .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

Чтобы отобразить панель кнопок навигации, оберните обе кнопки тегом <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>

Отображение в режиме наложения

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

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

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

    <!-- Кнопки, обернутые в div  -->

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

</div>

Внимание Вы можете применить компонент Видимость, чтобы показывать кнопки только при наведении на слайд.

  • <div class="uk-position-relative uk-visible-toggle uk-light" uk-slideshow>

    <ul class="uk-slideshow-items">
        <li>
            <img src="images/photo.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="images/dark.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="images/light.jpg" alt="" 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>