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

Создание гибкой навигации миниатюрами. Миниатюры в качестве навигации в отзывчивом слайд-шоу. Вертикальная навигация миниатюрами. Использование изображений в качестве навигации по слайд-шоу.

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

Компонент Thumbnav построен с Flexbox. Таким образом, чтобы выровнять навигацию миниатюрами, вы можете использовать компонент 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>
Slideshow с навигаций миниатюрами

Горизонтальная навигация миниатюрами для быстрой навигации по слайд-шоу. Готовый пример с использованием изображений в качестве навигации по слайд-шоу. При клике на картинку происходит переход к соответствующему изображению. 

  • <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>