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