Слайд-шоу
Создать aдаптивный изображения или видео слайд-шоу с потрясающими эффектами перехода, полноэкранный режим и накладками.
Использование
Для создания слайд-шоу, просто добавьте .uk-slideshow
класс <ul>
элемент и разместить изображения внутри элементов списка. Для того чтобы загрузить необходимые JavaScript, необходимо также добавить data-uk-slideshow
атрибут.
Пример
Примечание, чтобы активировать автозапуск, просто добавьте {autoplay:true}
параметр для атрибута данных.
Разметки
<ul class="uk-slideshow" data-uk-slideshow="{autoplay:true}">
<li><img src="" width="" height="" alt=""></li>
</ul>
Навигационные кнопки
Для навигации по слайдам, просто используйте data-uk-slideshow-item
атрибут. На целевые слайды, вам нужно задать данные атрибута каждого элемента навигации на номер соответствующего слайд-шоу пункт. Элементы с data-uk-slideshow-item
атрибут надо быть внутри data-uk-slideshow
контейнер.
Разметки
<div data-uk-slideshow>
<ul class="uk-slideshow">
<li></li>
<li></li>
</ul>
<ul>
<li data-uk-slideshow-item="0"><a href="">...</a></li>
<li data-uk-slideshow-item="1"><a href="">...</a></li>
</ul>
</div>
Установка атрибута next
и previous
переключится на соседних слайдах.
Разметки
<div data-uk-slideshow>
<ul class="uk-slideshow">
<li></li>
<li></li>
</ul>
<a href="" data-uk-slideshow-item="previous"></a>
<a href="" data-uk-slideshow-item="next"></a>
</div>
Slidenav и Dotnav
Гибкость слайд-шоу компонент позволяет вам использовать любой другой UIkit компоненты для навигации по пунктам. Например Slidenav и Dotnav может быть использован для применения стиля к слайд-шоу навигаций как вы можете увидеть ниже.
Пример
Разметки
<div class="uk-slidenav-position" data-uk-slideshow>
<ul class="uk-slideshow">
<li></li>
<li></li>
</ul>
<a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
<a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
<ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
<li data-uk-slideshow-item="0"><a href=""></a></li>
<li data-uk-slideshow-item="1"><a href=""></a></li>
</ul>
</div>
Переходы
Компонент слайд-шоу позволяет добавлять различные элементы анимации при переключении между ними. Все, что вам нужно сделать, это добавить animation
параметр в Data-атрибут и выбрать анимацию, которую требуется применить. Проверьте в таблице ниже представлены анимации обеспечены.
Класс | Описание |
---|---|
fade |
Этот пункт исчезает. |
scroll |
Предметы в свиток. |
scale |
Детали масштабирования на выход. |
swipe |
Предметы проведите. |
Чтобы применить эти более продвинутые переходы, в slideshow-fx.js
файл должен быть включен в Head документа.
Класс | Описание |
---|---|
slice-down |
Предметы скольжение вниз в ломтики. |
slice-up |
Элементы скольжения в ломтики. |
slice-up-down |
Нарезанные элементы скольжения в alterning направлениях. |
fold |
Предметы сложены в. |
puzzle |
Элементы разделены на квадраты, которые случайным образом исчезают. |
boxes |
Элементы разделены на квадраты, которые в масштабе по диагонали из верхнего левого угла. |
boxes-reverse |
Элементы разделены на квадраты, которые в масштабе по диагонали из Нижнего правого угла. |
random-fx |
Разные анимации применяются в случайном порядке. |
Пример
-
Свиток
-
Масштаб
-
Салфетки
-
Ломтик Вниз
-
Нарезать
-
Ломтик Вверх Вниз
-
Фолд
-
Головоломки
-
Коробки
-
Коробки Реверса
Разметки
<ul class="uk-slideshow" data-uk-slideshow="{animation: 'random-fx'}">...</ul>
Эффект Кена Бернса
Эффект Кена Бернса, может также применяться в слайд-шоу элементы. Просто добавить {kenburns:true}
опция для данных атрибутов. Этот эффект также может быть применен к видео.
Пример
Разметки
<ul class="uk-slideshow" data-uk-slideshow="{kenburns:true}">...</ul>
Custom animation duration:
<ul class="uk-slideshow" data-uk-slideshow="{kenburns:'30s'}">...</ul>
Полноэкранное слайд-шоу
Для создания полноэкранного слайд-шоу, который растягивается, чтобы заполнить всю область просмотра, просто добавьте .uk-slideshow-fullscreen
класс.
Разметки
<ul class="uk-slideshow uk-slideshow-fullscreen" data-uk-slideshow>...</ul>
Накладки
Вы также можете добавлять на слайд-шоу с различными накладками. Просто добавить .uk-overlay-panel
К <div>
элемент внутри элемента списка. Также добавить .uk-overlay-background
и .uk-overlay-fade
показать фон и переход. Чтобы переключить режим наложения однажды слайд становится активным добавьте .uk-overlay-active
к списку контейнера. Дополнительные параметры, проверьте Наложение компонент.
Пример
Разметки
<ul class="uk-slideshow uk-overlay-active" data-uk-slideshow>
<li>
<img src="" width="" height="" alt="">
<div class="uk-overlay-panel uk-overlay-background uk-overlay-fade">...</div>
</li>
</ul>
Видео
UIkit позволяет представить оба видео-элементов и фреймов в слайд-шоу.
Пример
Разметки
<!-- This is a slideshow with a video element -->
<ul class="uk-slideshow">
<li>
<video width="" height="" autoplay loop muted controls>
<source src="" type="">
</video>
</li>
</ul>
<!-- This is a slideshow with an Iframe -->
<ul class="uk-slideshow">
<li>
<iframe src="" width="" height="" frameborder="0" allowfullscreen></iframe>
</li>
</ul>
Содержание
Вы в принципе можете вставить любой контент, например текст или всего грид Как слайд-шоу элементов.
Пример
Инициализации элементов вручную
var slideshow = UIkit.slideshow(element, { /* options */ });
JavaScript варианты
Вариант | По умолчанию | Описание |
---|---|---|
animation |
'fade' | Определяет предпочтительный переход между элементами. |
duration |
500 | Определяет Длительность перехода. |
height |
'auto' | Определяет высоту слайд-шоу. |
start |
0 | Определяет первое слайд-шоу отображаемого элемента. |
autoplay |
false | Определяет, будет ли слайд-шоу элементы должны переключаться автоматически. |
pauseOnHover |
true | Пауза автозапуск при наведении на слайд-шоу. |
autoplayInterval |
7000 | Определяет промежуток времени между переключением слайдов элементов. |
videoautoplay |
true | Определяет, является ли или не видео начинается автоматически. |
videomute |
true | Определяет, является ли или не видео отключается. |
kenburns |
false | Определяет, может ли эффект Кена Бернса является активным. Если kenburns - числовое значение, оно будет использоваться как Длительность анимации. |
kenburnsanimations |
'uk-animation-middle-left', 'uk-animation-top-right', 'uk-animation-bottom-left', 'uk-animation-top-center', 'uk-animation-bottom-right' |
Анимационный сериал. |
slices |
15 | Определяет количество срезов, если "срез" переход установлен. |
События
Название | Параметр | Описание |
---|---|---|
show.uk.slideshow |
event, next slide, current slide | На показ нового слайда (после того, как анимация закончится) |
beforeshow.uk.slideshow |
event, next slide, current slide | Перед выводом нового слайда (до того, как анимация закончится) |