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