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

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

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

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

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

Класс Описание
.uk-thumbnav Добавьте этот класс к элементу <ul>, чтобы определить компонент Thumbnav. Расположите ваши миниатюрные изображения в списке внутри элементов <a>.
.uk-active Добавьте этот класс в элемент списка, чтобы применить активное состояние. 
<ul class="uk-thumbnav">
    <li class="uk-active"><a href=""><img src="" width="" height="" alt=""></a></li>
    <li><a href=""><img src="" width="" height="" alt=""></a></li>
</ul>

Совет Если элементы могут переноситься на следующую строку, добавьте атрибут uk-margin из компонента внешние отступы. 

<ul class="uk-thumbnav" uk-margin>
    <li class="uk-active">
        <a href="#">
            <img src="images/photo.webp" width="100" height="70" loading="lazy" alt="миниатюра">
        </a>
    </li>
    <li><a href="#"><img src="images/dark.webp" width="100" height="70" loading="lazy" alt="миниатюра"></a></li>
    <li><a href="#"><img src="images/light.webp" width="100" height="70" loading="lazy" alt="миниатюра"></a></li>
</ul>

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

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

Навигация миниатюрами (превьюшками) также может отображаться вертикально. Просто добавьте модификатор .uk-thumbnav-vertical и уменьшенные до небольших размеров изображения примут требуемое положение. 

<ul class="uk-thumbnav uk-thumbnav-vertical">...</ul>
  • Миниатюра 1
  • Миниатюра 2
  • Миниатюра 3
<ul class="uk-thumbnav uk-thumbnav-vertical">
    <li class="uk-active"><a href="#"><img src="images/photo.webp" width="100" height="70" loading="lazy" alt="Миниатюра 1"></a></li>
    <li><a href="#"><img src="images/dark.webp" width="100" height="70" loading="lazy" alt="Миниатюра 2"></a></li>
    <li><a href="#"><img src="images/light.webp" width="100" height="70" loading="lazy" alt="Миниатюра 3"></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 с навигаций миниатюрами

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

слайд-шоу
слайд-шоу
слайд-шоу
  • миниатюра photo
  • миниатюра dark
  • миниатюра light 
<div class="uk-position-relative" uk-slideshow="animation: fade"><!-- Добавляем .uk-position-relative -->

    <div class="uk-slideshow-items">
        <div>
            <img src="images/photo.webp" alt="слайд-шоу" loading="lazy" data-uk-cover>
        </div>
        <div>
            <img src="images/dark.webp" alt="слайд-шоу" loading="lazy" data-uk-cover>
        </div>
        <div>
            <img src="images/light.webp" alt="слайд-шоу" loading="lazy" data-uk-cover>
        </div>
    </div>

    <!-- Миниатюры -->
    <div class="uk-position-bottom-center uk-position-small">
        <ul class="uk-thumbnav">
            <li uk-slideshow-item="0">
                <a href="#"><img src="images/photo.webp" width="100" height="70" loading="lazy" alt="миниатюра photo"></a>
            </li>
            <li uk-slideshow-item="1">
                <a href="#"><img src="images/dark.webp"  width="100" height="70" loading="lazy" alt="миниатюра dark"></a>
            </li>
            <li uk-slideshow-item="2">
                <a href="#"><img src="images/light.webp" width="100" height="70" loading="lazy" alt="миниатюра light"></a>
            </li>
        </ul>
    </div>

</div>