Компонент Навигация миниатюрами 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
из компонента внешние отступы.
Вертикальное выравнивание
Вертикальная навигация миниатюрами
Навигация миниатюрами (превьюшками) также может отображаться вертикально.
Просто добавьте модификатор .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>
Горизонтальная навигация миниатюрами для быстрой навигации по слайд-шоу. Готовый пример с использованием изображений в качестве навигации по слайд-шоу. При клике на картинку происходит переход к соответствующему изображению.
-
-
<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>