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