Компонент Навигация миниатюрами

Создание гибкой навигации миниатюрами; миниатюры в качестве навигации в отзывчивом слайд-шоу.

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

Компонент Thumbnav построен с Flexbox. Таким образом, чтобы выровнять thumbnav, вы можете использовать компонент Flex.

Чтобы создать навигацию с миниатюрами, используйте следующие классы.

Класс Описание
.uk-thumbnav Добавьте этот класс к элементу <ul>, чтобы определить компонент Thumbnav. Расположите ваши миниатюрные изображения в списке внутри элементов <a>.
.uk-active Добавьте этот класс в элемент списка, чтобы применить активное состояние. 
<ul class="uk-thumbnav">
    <li class="uk-active"><a href=""><img src="" alt=""></a></li>
    <li><a href=""><img src="" alt=""></a></li>
</ul>
Примечание - рекомендация: если элементы могут переноситься на следующую строку, добавьте атрибут uk-margin из компонента внешние отступы.
  • <ul class="uk-thumbnav" uk-margin>
    <li class="uk-active"><a href="#"><img src="/demo/img/photo.jpg" width="100" alt=""></a></li>
    <li><a href="#"><img src="/demo/img/dark.jpg" width="100" alt=""></a></li>
    <li><a href="#"><img src="/demo/img/light.jpg" width="100" alt=""></a></li>
</ul>

Вертикальное выравнивание

Навигация миниатюрами также может отображаться вертикально. Просто добавьте модификатор .uk-thumbnav-vertical.

<ul class="uk-thumbnav uk-thumbnav-vertical">...</ul>

Вертикальная навигация миниатюрами

  • <ul class="uk-thumbnav uk-thumbnav-vertical" uk-margin>
    <li class="uk-active"><a href="#"><img src="/demo/img/photo.jpg" width="100" alt=""></a></li>
    <li><a href="#"><img src="/demo/img/dark.jpg" width="100" alt=""></a></li>
    <li><a href="#"><img src="/demo/img/light.jpg" width="100" alt=""></a></li>
</ul>

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

Чтобы расположить миниатюры поверх элемента, например, при использовании компонента «Слайд-шоу», добавьте один из классов .uk-position-* из компонента позиционирование контента к элементу div, оборачивающему миниатюру. Основному контейнеру-обёртке, добавьте класс .uk-position-relative.

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

    <!-- Содержимое -->

    <div class="uk-position-bottom-center uk-position-small">
        <ul class="uk-thumbnav">...</ul>
    </div>

</div>

Навигация миниатюрами. Расположение в нижней части.

  • <div class="uk-position-relative" uk-slideshow="animation: fade"><!-- Добавляем .uk-position-relative -->
    <ul class="uk-slideshow-items">
        <li>
            <img src="/demo/img/photo.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="/demo/img/dark.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="/demo/img/light.jpg" alt="" uk-cover>
        </li>
    </ul>
    <div class="uk-position-bottom-center uk-position-small"><!-- Всё остальное здесь -->
        <ul class="uk-thumbnav">
            <li uk-slideshow-item="0"><a href="#"><img src="/demo/img/photo.jpg" width="100" alt=""></a></li>
            <li uk-slideshow-item="1"><a href="#"><img src="/demo/img/dark.jpg" width="100" alt=""></a></li>
            <li uk-slideshow-item="2"><a href="#"><img src="/demo/img/light.jpg" width="100" alt=""></a></li>
        </ul>
    </div>
</div>
Документация
Компоненты