Компонент Навигация миниатюрами 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="/demo/img/photo.jpg" width="100" height="70" alt="миниатюра">
    	</a>
    </li>
    <li><a href="#"><img src="/demo/img/dark.jpg" width="100" height="70" alt="миниатюра"></a></li>
    <li><a href="#"><img src="/demo/img/light.jpg" width="100" height="70" alt="миниатюра"></a></li>
</ul>

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

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

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

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

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

    • слайд-шоу
    • слайд-шоу
    • слайд-шоу
    • миниатюра photo
    • миниатюра dark
    • миниатюра light 
  • <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="слайд-шоу" loading="lazy" data-uk-cover>
        </li>
        <li>
            <img src="/demo/img/dark.jpg" alt="слайд-шоу" loading="lazy" data-uk-cover>
        </li>
        <li>
            <img src="/demo/img/light.jpg" alt="слайд-шоу" loading="lazy" data-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" height="70" loading="lazy" alt="миниатюра photo"></a>
            </li>
            <li uk-slideshow-item="1">
            	<a href="#"><img src="/demo/img/dark.jpg"  width="100" height="70" loading="lazy" alt="миниатюра dark"></a>
            </li>
            <li uk-slideshow-item="2">
            	<a href="#"><img src="/demo/img/light.jpg" width="100" height="70" loading="lazy" alt="миниатюра light"></a>
            </li>
        </ul>
    </div>
    
</div>