Компонент Слайд-шоу
Создайте адаптивное слайд-шоу с изображениями и видео. Различные режимы анимации при переходах. Пользовательский интервал между переключением слайдов. Слайд-шоу на весь экран с контентом в любом месте слайда и бесконечной прокруткой.
Компонент Слайд-шоу полностью адаптивен и поддерживает сенсорную и swipe-навигацию, а также перетаскивание мышью для ПК. Он даже ускоряется вместе с вами, чтобы не отставать от вашего темпа, когда вы нажимаете на предыдущую и следующую навигацию. Все анимации аппаратно-ускоренные для более плавной работы.
Slideshow: Руководство
Чтобы применить этот компонент, добавьте атрибут uk-slideshow
к элементу контейнера и создайте список слайдов с классом .uk-slideshow-items
.
Добавьте изображение на заднем плане каждого слайда, с использованием атрибута uk-cover
из компонента Cover.
<div uk-slideshow>
<div class="uk-slideshow-items">
<div>
<img src="" alt="" uk-cover>
</div>
</div>
</div>
Совет
Чтобы лениво загружать изображения в слайд-шоу по принципу «ленивой загрузки» (Lazy loading),
используйте атрибут loading="lazy"
.
Компонент Slideshow автоматически удалит этот атрибут с изображений на соседних слайдах.
Анимации
Использование анимации в слайд-шоу
По умолчанию в слайд-шоу используется анимация slide
. Вы можете установить опцию animation
для использования другой анимации. Возможны следующие значения:
Анимация | Описание |
---|---|
slide |
Слайды скользят в бок. |
fade |
Слайды плавно исчезают и появляются. |
scale |
Слайды масштабируются и исчезают. |
pull |
Слайды будто вытягиваются из колоды; "срезает колоду". |
push |
Слайды скользят будто накладываются на колоду. |
<div uk-slideshow="animation: fade">...</div>
Slide
Fade
Scale
Pull
Push
<div class="uk-child-width-1-2@m" uk-grid>
<div>
<h3>Slide</h3>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow>
<div class="uk-slideshow-items">
<div>
<img src="images/photo.webp" loading="lazy" alt="Слайд-шоу 1" uk-cover>
</div>
<div>
<img src="images/dark.webp" loading="lazy" alt="Слайд-шоу 2" uk-cover>
</div>
<div>
<img src="images/light.webp" loading="lazy" alt="Слайд-шоу 3" uk-cover>
</div>
</div>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
</div>
<div>
<h3>Fade</h3>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: fade">
<div class="uk-slideshow-items">
<div>
<img src="images/photo.webp" loading="lazy" alt="Слайд-шоу 1" uk-cover>
</div>
<div>
<img src="images/dark.webp" loading="lazy" alt="Слайд-шоу 2" uk-cover>
</div>
<div>
<img src="images/light.webp" loading="lazy" alt="Слайд-шоу 3" uk-cover>
</div>
</div>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
</div>
<div>
<h3>Scale</h3>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: scale">
<div class="uk-slideshow-items">
<div>
<img src="images/photo.webp" loading="lazy" alt="Слайд-шоу 1" uk-cover>
</div>
<div>
<img src="images/dark.webp" loading="lazy" alt="Слайд-шоу 2" uk-cover>
</div>
<div>
<img src="images/light.webp" loading="lazy" alt="Слайд-шоу 3" uk-cover>
</div>
</div>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
</div>
<div>
<h3>Pull</h3>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: pull">
<div class="uk-slideshow-items">
<div>
<img src="images/photo.webp" loading="lazy" alt="Слайд-шоу 1" uk-cover>
</div>
<div>
<img src="images/dark.webp" loading="lazy" alt="Слайд-шоу 2" uk-cover>
</div>
<div>
<img src="images/light.webp" loading="lazy" alt="Слайд-шоу 3" uk-cover>
</div>
</div>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
</div>
<div>
<h3>Push</h3>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">
<div class="uk-slideshow-items">
<div>
<img src="images/photo.webp" loading="lazy" alt="Слайд-шоу 1" uk-cover>
</div>
<div>
<img src="images/dark.webp" loading="lazy" alt="Слайд-шоу 2" uk-cover>
</div>
<div>
<img src="images/light.webp" loading="lazy" alt="Слайд-шоу 3" uk-cover>
</div>
</div>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
</div>
</div>
Автозапуск
Автозапуск cлайд-шоу
Чтобы активировать автозапуск слайд-шоу, просто добавьте к атрибуту опцию autoplay: true
.
Вы также можете установить интервал в миллисекундах между переключением слайдов с помощью autoplay-interval: 6000
.
Чтобы приостановить автозапуск при наведении на слайд-шоу, используйте pause-on-hover: true
.
<div uk-slideshow="autoplay: true">...</div>
Бесконечная прокрутка
По умолчанию бесконечная прокрутка включена. Чтобы отключить это поведение, добавьте в атрибут опцию finite: true
.
<div uk-slideshow="finite: true">...</div>
Соотношение
Параметр «Ratio»
Слайд-шоу всегда занимает всю ширину родительского контейнера. Высота регулируется в соответствии с заданным соотношением. Чтобы изменить соотношение по умолчанию 16:9, просто добавьте в атрибут опцию ratio
. Рекомендуется использовать тот же коэффициент, что и для фоновых изображений. Например, используйте их ширину и высоту, например 1600:1200
.
<div uk-slideshow="ratio: 7:3">...</div>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: 7:3; animation: push">
<div class="uk-slideshow-items">
<div>
<img src="images/photo.webp" loading="lazy" alt="Слайд-шоу 1" uk-cover>
</div>
<div>
<img src="images/dark.webp" loading="lazy" alt="Слайд-шоу 2" uk-cover>
</div>
<div>
<img src="images/light.webp" loading="lazy" alt="Слайд-шоу 3" uk-cover>
</div>
</div>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slideshow-item="next"></a>
</div>
Мин. / Макс. Высота
По умолчанию высота слайд-шоу соответствует определенному соотношению.
Минимальная или максимальная высота может быть установлена с помощью параметров min-height
и max-height
.
<div uk-slideshow="min-height: 300; max-height: 600">...</div>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="min-height: 300; max-height: 600; animation: push">
<div class="uk-slideshow-items">
<div>
<img src="images/photo.webp" loading="lazy" alt="Слайд-шоу 1" uk-cover>
</div>
<div>
<img src="images/dark.webp" loading="lazy" alt="Слайд-шоу 2" uk-cover>
</div>
<div>
<img src="images/light.webp" loading="lazy" alt="Слайд-шоу 3" uk-cover>
</div>
</div>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
Высота окна просмотра
Viewport
Добавление атрибута uk-height-viewport
из компонента Высота элементов в список элементов слайд-шоу увеличит высоту, чтобы заполнить весь видовой экран. Вы можете установить опцию минимальной высоты min-height
, чтобы определить минимальную высоту.
<div uk-slideshow="ratio: false">
<div class="uk-slideshow-items" uk-height-viewport="min-height: 300">...</div>
</div>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: false">
<div class="uk-slideshow-items" uk-height-viewport="offset-top: true; offset-bottom: 30">
<div>
<img src="images/photo.webp" loading="lazy" alt="Слайд-шоу 1" uk-cover>
</div>
<div>
<img src="images/dark.webp" loading="lazy" alt="Слайд-шоу 2" uk-cover>
</div>
<div>
<img src="images/light.webp" loading="lazy" alt="Слайд-шоу 3" uk-cover>
</div>
</div>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
Этот пример слайд-шоу демонстрирует 70% высоты области просмотра.
Навигация
Навигация в слайд-шоу
Для навигации по слайдам просто используйте атрибут uk-slideshow-item
. Чтобы "сориентировать" слайды, установите атрибут каждого элемента навигации равным порядковому номеру соответствующего элемента слайд-шоу.
Элементы с атрибутом uk-slideshow-item
должны находиться внутри контейнера uk-slideshow
.
Установив в атрибут значения next
и previous
заставит переключать на соседние слайды.
<div uk-slideshow>
<div class="uk-slideshow-items">...</div>
<a href="#" uk-slideshow-item="previous">...</a>
<a href="#" uk-slideshow-item="next">...</a>
<ul>
<li uk-slideshow-item="0"><a href>...</a></li>
<li uk-slideshow-item="1"><a href>...</a></li>
<li uk-slideshow-item="2"><a href>...</a></li>
</ul>
</div>
Гибкость компонента Slideshow позволяет использовать любые другие компоненты UIkit для навигации по элементам. Например, компоненты Slidenav, Dotnav и Thumbnav могут использоваться для стилизации навигации в режиме слайд-шоу.
Если в элементах навигации нет конкретного содержимого элемента, вы также можете добавить класс .uk-slideshow-nav
вместо добавления элементов навигации вручную.
Он будет генерировать свои элементы автоматически, используя <li><a href></a></li>
в качестве разметки.
Это отличный вариант при использовании точечной навигации Dotnav.
<div uk-slideshow>
<div class="uk-slideshow-items">...</div>
<ul class="uk-slideshow-nav uk-dotnav"></ul>
</div>
.uk-light
или .uk-dark
из компонента Инверсия.
<div uk-slideshow="animation: push">
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
<div class="uk-slideshow-items">
<div>
<img src="images/photo.webp" loading="lazy" alt="Слайд-шоу 1" uk-cover>
</div>
<div>
<img src="images/dark.webp" loading="lazy" alt="Слайд-шоу 2" uk-cover>
</div>
<div>
<img src="images/light.webp" loading="lazy" alt="Слайд-шоу 3" uk-cover>
</div>
</div>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slideshow-item="next"></a>
</div>
<ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
Параллакс-анимация
Вместо пошаговой анимации с использованием элементов управления навигацией слайд-шоу может использовать плавную параллакс-анимацию,
основанную на положении прокрутки в области просмотра.
Просто добавьте к атрибуту parallax: true
.
Если в разметке задана навигация, она не будет доступна для кликов, но получит активное состояние текущего слайда.
<div uk-slideshow="parallax: true">…</div>
<div uk-slideshow="animation: push; parallax: true;">
<div class="uk-slideshow-items">
<div>
<img src="images/photo.webp" loading="lazy" alt="Слайд-шоу 1" uk-cover>
</div>
<div>
<img src="images/dark.webp" loading="lazy" alt="Слайд-шоу 2" uk-cover>
</div>
<div>
<img src="images/light.webp" loading="lazy" alt="Слайд-шоу 3" uk-cover>
</div>
</div>
<ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
Чтобы настроить длительность параллакса, задайте параметры parallax-start
и parallax-end
.
- Параметр
parallax-start
- Определяет, когда начинается анимация.
Значение по умолчанию
0
означает, что верхняя граница слайд-шоу и нижняя граница области просмотра пересекаются. - Параметр
parallax-end
- Определяет, когда анимация заканчивается.
Значение по умолчанию
0
означает, что нижняя граница слайд-шоу и верхняя граница области просмотра пересекаются.
Значения могут быть заданы в любых единицах измерения, а именно vh
, %
и px
.
Единица %
относится к высоте слайд-шоу.
Оба параметра позволяют использовать базовые математические операнды +
и -
.
<div uk-slideshow="parallax: true; parallax-start: 100%; parallax-end: 100%;">…</div>
<div uk-slideshow="animation: push; parallax: true; parallax-start: 100%; parallax-end: 100%;">
<div class="uk-slideshow-items">
<div>
<img src="images/photo.webp" loading="lazy" alt="Слайд-шоу 1" uk-cover>
</div>
<div>
<img src="images/dark.webp" loading="lazy" alt="Слайд-шоу 2" uk-cover>
</div>
<div>
<img src="images/light.webp" loading="lazy" alt="Слайд-шоу 3" uk-cover>
</div>
</div>
<ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
Видео
Слайд-шоу не ограничивается изображениями.
Другие медиафайлы, например видео, можно размещать на заднем плане каждого слайда,
используя атрибут uk-cover
компонента Cover.
Видео отключается и воспроизводится автоматически. Видео будет приостановлено,
когда оно не видно, и возобновится, как только оно снова станет видимым.
<div uk-slideshow>
<div class="uk-slideshow-items">
<div>
<video src="" autoplay loop muted playsinline uk-cover></video>
</div>
<div>
<iframe src="" uk-cover></iframe>
</div>
</div>
</div>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push;">
<div class="uk-slideshow-items">
<div>
<img src="images/photo.webp" alt="Слайд-шоу" uk-cover>
</div>
<div>
<video src="/video/bbb/big-buck-bunny.mp4" autoplay loop muted playsinline uk-cover></video>
</div>
<div>
<iframe src="https://www.youtube-nocookie.com/embed/SkVqJ1SGeL0?autoplay=1&controls=0&showinfo=0&rel=0&playlist=SkVqJ1SGeL0&modestbranding=1&wmode=transparent&playsinline=1&enablejsapi=1"
width="1920" height="1080" allowfullscreen uk-cover loading="lazy"></iframe>
</div>
</div>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
Эффект «Ken Burns»
Чтобы добавить эффект Кена Бернса, оберните изображение в элемент div
добавив классы .uk-position-cover
и .uk-animation-kenburns
. Вы также можете применить .uk-animation-reverse
или один из классов .uk-transform-origin-*
из компонента с полезностями - Utility, чтобы изменить эффект.
<div uk-slideshow>
<div class="uk-slideshow-items">
<div>
<div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-center-left">
<img src="" alt="" uk-cover>
</div>
</div>
</div>
</div>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">
<div class="uk-slideshow-items">
<div>
<div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-center-left">
<img src="images/photo.webp" loading="lazy" alt="Слайд-шоу 1" uk-cover>
</div>
</div>
<div>
<div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-top-right">
<img src="images/dark.webp" loading="lazy" alt="Слайд-шоу 2" uk-cover>
</div>
</div>
<div>
<div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-bottom-left">
<img src="images/light.webp" loading="lazy" alt="Слайд-шоу 3" uk-cover>
</div>
</div>
</div>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slideshow-item="next"></a>
</div>
Наложение контента
Слайд-шоу с контентом в любом месте слайда
Добавьте наложение контента, используя компонент Позиционирование. Это позволяет размещать контент в любом месте слайда.
<div uk-slideshow>
<div class="uk-slideshow-items">
<div>
<img src="" alt="" uk-cover>
<div class="uk-position-center uk-position-small">
<!-- Здесь находится контент -->
</div>
</div>
</div>
</div>
.uk-light
или .uk-dark
из компонента Инверсия или используйте Оверлей,
чтобы отобразить содержимое в соответствующем месте и виде.
<div class="uk-position-relative uk-visible-toggle" tabindex="-1" uk-slideshow="animation: push">
<div class="uk-slideshow-items">
<div>
<img src="images/photo.webp" loading="lazy" alt="Слайд-шоу 1" uk-cover>
<div class="uk-overlay uk-overlay-primary uk-position-center uk-position-small uk-text-center ">
<h3 class="uk-h2 uk-margin-remove">Center</h3>
<p class="uk-margin-remove">Я не просто учусь на своих ошибках...<br> Я, блин, постоянно повторяю пройденный материал!</p>
</div>
</div>
<div>
<img src="images/dark.webp" loading="lazy" alt="Слайд-шоу 2" uk-cover>
<div class="uk-position-bottom uk-position-medium uk-text-center uk-light">
<h3 class="uk-margin-remove">Bottom</h3>
<p class="uk-margin-remove">Вежливость - это не только послать, но и проводить.</p>
</div>
</div>
<div>
<img src="images/light.webp" loading="lazy" alt="Слайд-шоу 3" uk-cover>
<div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center">
<h3 class="uk-margin-remove">Overlay Bottom</h3>
<p class="uk-margin-remove">Ждать, когда соберется жена, - как скачивать что-то из интернета:<br> осталось 2 минуты, осталась 1 минута... Осталось 17 минут.</p>
</div>
</div>
<div>
<img src="images/dark.webp" loading="lazy" alt="Слайд-шоу 2" uk-cover>
<div class="uk-overlay uk-overlay-default uk-position-bottom-right uk-position-small">
<h3 class="uk-margin-remove">Overlay Bottom Right</h3>
<p class="uk-margin-remove">Если вы не материтесь за рулем, значит, вы не следите за дорогой.</p>
</div>
</div>
</div>
<div class="uk-light">
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slideshow-item="next"></a>
</div>
</div>
Параллакс эффекты
Добавление параллакс эффектов в слайд-шоу
Добавьте атрибут uk-slideshow-parallax
к любому элементу внутри слайдов, чтобы анимировать его вместе с анимацией слайд-шоу. Добавьте параметр с желаемыми значениями анимации для каждого свойства CSS, которое вы хотите анимировать. Определите хотя бы одно начальное и конечное значение. Это можно сделать, передав два значения через запятую.
Эта функциональность унаследована из компонента Parallax и позволяет анимировать свойства CSS в зависимости от положения прокрутки анимации слайд-шоу. Посмотрите на возможные свойства, которые можно анимировать.
<div uk-slideshow>
<div class="uk-slideshow-items">
<div>
<img src="" alt="" uk-cover>
<div class="uk-position-center uk-position-small">
<div uk-slideshow-parallax="x: 100,-100">
<!-- Контент расположен здесь -->
</div>
</div>
</div>
</div>
</div>
В приведенном выше примере контент будет начинаться с установленного значения 100
и анимироваться полпути до значения 0
, пока слайд перемещается на место. Когда слайд снова начинает двигаться, контент продолжает анимироваться до -100
. Это работает, потому что начальные и конечные значения имеют одинаковое расстояние.
Для разных расстояний необходимы три значения:
начало - анимация стартует и прибывает к центру;
середина - центрируется, содержимое на месте;
конец - отправляется с анимацией в свой путь и до скорых встреч!
<div uk-slideshow-parallax="x: 300,0,-100">...</div>
Следующий пример определяет различные входящие и исходящие анимации. Содержание скользит, двигаясь от 100
до 0
и исчезает с 1
до 0
.
<div uk-slideshow-parallax="x: 100,0,0; opacity: 1,1,0">...</div>
<div class="uk-position-relative uk-light uk-visible-toggle" tabindex="-1" uk-slideshow="animation: push">
<div class="uk-slideshow-items">
<div>
<img src="images/photo.webp" loading="lazy" alt="Слайд-шоу 1" uk-cover>
<div class="uk-position-center uk-position-small uk-text-center">
<h3 class="uk-h1" uk-slideshow-parallax="x: 100,-100">Параллакс</h3>
<p uk-slideshow-parallax="x: 200,-200">Ничего не просит и вежливо отказывается.</p>
</div>
</div>
<div>
<img src="images/dark.webp" loading="lazy" alt="Слайд-шоу 2" uk-cover>
<div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center">
<h3 uk-slideshow-parallax="x: 100,-100">Движение</h3>
<p uk-slideshow-parallax="x: 200,-200">Ох и не полюбила его хозяйка!</p>
</div>
</div>
<div>
<img src="images/light.webp" loading="lazy" alt="Слайд-шоу 3" uk-cover>
<div class="uk-overlay uk-overlay-primary uk-position-center uk-text-center">
<h3 uk-slideshow-parallax="y: -50,0,0; opacity: 1,1,0">Скольжение</h3>
<p uk-slideshow-parallax="y: 50,0,0; opacity: 1,1,0">Забренчала и натянулась золотым лучом.</p>
</div>
</div>
</div>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slideshow-item="next"></a>
</div>
Расширенные эффекты
Параллакс-атрибут можно использовать для добавления дополнительных эффектов к анимации слайд-шоу. В следующем примере анимация push
расширяет свои возможности за счет затемнения и уменьшения изображения при его скольжении.
<div uk-slideshow="animation: push">
<div class="uk-slideshow-items">
<div>
<div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
<img src="" alt="" uk-cover>
</div>
<div class="uk-position-cover" uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
</div>
</div>
</div>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push">
<div class="uk-slideshow-items">
<div>
<div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
<img src="images/photo.webp" loading="lazy" alt="Параллакс-слайд 1" uk-cover>
</div>
<div class="uk-position-cover" uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
<div class="uk-position-center uk-position-medium uk-text-center">
<div uk-slideshow-parallax="scale: 1,1,0.8">
<h4 class="uk-h2" uk-slideshow-parallax="x: 200,0,0">Эффект</h4>
<p uk-slideshow-parallax="x: 400,0,0;">Нить судьбы пока еще на берегу.</p>
</div>
</div>
</div>
<div>
<div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
<img src="images/dark.webp" loading="lazy" alt="Параллакс-слайд 2" uk-cover>
</div>
<div class="uk-position-cover" uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
<div class="uk-position-center uk-position-medium uk-text-center">
<div uk-slideshow-parallax="scale: 1,1,0.8">
<h4 class="uk-h2" uk-slideshow-parallax="x: 200,0,0">Скольжение</h4>
<p uk-slideshow-parallax="x: 400,0,0;">Зажёг нестерпимым золотом бечеву.</p>
</div>
</div>
</div>
<div>
<div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
<img src="images/light.webp" loading="lazy" alt="Параллакс-слайд 3" uk-cover>
</div>
<div class="uk-position-cover" uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
<div class="uk-overlay uk-overlay-primary uk-position-center uk-text-center">
<div uk-slideshow-parallax="scale: 1,1,0.8">
<h4 class="uk-h3" uk-slideshow-parallax="x: 200,0,0">Анимация</h4>
<p uk-slideshow-parallax="x: 400,0,0;">Шаг навстречу своей судьбе.</p>
</div>
</div>
</div>
</div>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slideshow-item="next"></a>
</div>
Контент переходы
Классы переходов из компонента Плавные переходы запускаются автоматически внутри слайдов. В отличие от эффекта параллакса переходы не прикрепляются к анимации слайд-шоу и начинают воспроизводиться независимо после анимации слайд-шоу.
<div uk-slideshow>
<div class="uk-slideshow-items">
<div>
<img src="" alt="" uk-cover>
<div class="uk-position-bottom uk-position-small">
<div class="uk-transition-slide-bottom">
<!-- Здесь расположен контент -->
</div>
</div>
</div>
</div>
</div>
Вместе с компонентом Overlay контент-переходы отображаются в виде классического описания в слайд-шоу.
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: fade">
<div class="uk-slideshow-items">
<div>
<img src="images/photo.webp" loading="lazy" alt="Слайд 1" uk-cover>
<div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
<h3 class="uk-margin-remove">Bottom</h3>
<p class="uk-margin-remove">Великолепные рыцари прагали на мешках с золотом.</p>
</div>
</div>
<div>
<img src="images/dark.webp" loading="lazy" alt="Слайд 2" uk-cover>
<div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
<h3 class="uk-margin-remove">Bottom</h3>
<p class="uk-margin-remove">Богатства царевича были доставлены в его квартиру.</p>
</div>
</div>
<div>
<img src="images/light.webp" loading="lazy" alt="Слайд 3" uk-cover>
<div class="uk-overlay uk-overlay-primary uk-position-right uk-text-center uk-transition-slide-right uk-width-medium">
<h3 class="uk-margin-remove">Left</h3>
<p class="uk-margin-remove">Давно мечтал о просторной собственной скамейке.</p>
</div>
</div>
</div>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
Опции компонента
При использовании компонента Slideshow к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.
Опция | Значение | По умолчанию | Описание |
---|---|---|---|
animation |
String | slide |
Режим анимации слайд-шоу: slide , fade , scale , pull или push . |
autoplay |
Boolean | false |
Автозапуск слайд-шоу. |
autoplay-interval |
Number | 7000 |
Задержка между переключением слайдов в режиме автозапуска. |
draggable |
Boolean | true |
Включить перетаскивание. |
easing |
String | ease |
Плавность анимации. (CSS timing functions or cubic-bezier). |
finite |
Boolean | false |
Отключить бесконечную прокрутку/ скольжение. |
pause-on-hover |
Boolean | true |
Приостановить при наведении. |
index |
Number | 0 |
Элемент слайд-шоу для отображения. Индекс начинается с 0. |
velocity |
Number | 1 |
Скорость анимации (пиксель / мс). |
ratio |
Boolean, String | 16:9 |
Соотношение. (false предотвращает регулировку высоты). |
min-height |
Boolean, Number | false |
Минимальная высота. |
max-height |
Boolean, Number | false |
Максимальная высота. |
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.slideshow(element, options);
События
Следующие события будут инициированы для элементов компонента «Slideshow»:
Имя события | Описание |
---|---|
beforeitemshow |
Срабатывает до отображения элемента. |
itemshow |
Срабатывает после отображения элемента. |
itemshown |
Запускается после завершения анимации показанного элемента. |
beforeitemhide |
Срабатывает до того, как элемент спрятан. |
itemhide |
Срабатывает после запуска анимации скрытия элемента. |
itemhidden |
Запускается после завершения анимации скрытия элемента. |
Методы
Для компонента «Slideshow» доступны следующие методы:
Show
UIkit.slideshow(element).show(index);
Показывает элемент слайд-шоу.
startAutoplay
UIkit.slideshow(element).startAutoplay();
Запускает автозапуск слайд-шоу.
stopAutoplay
UIkit.slideshow(element).stopAutoplay();
Останавливает автозапуск слайд-шоу.
Доступность
Компонент «Слайд-шоу» соответствует Carousel (Slide Show or Image Rotator) Pattern и автоматически устанавливает соответствующие роли, состояния и свойства WAI-ARIA.
- Слайд-шоу имеет свойство
aria-roledescription
с установленным значениемcarousel
. - Список слайдов сожержит идентификатор (ID) и свойство
aria-live
. - Слайды имеют идентификатор, роль
group
, если слайд-шоу имеет только предыдущую/следующую навигацию, или рольtabpanel
, у него есть навигация по вкладкам, свойствоaria-roledescription
содержащееslide
и свойствоaria-label
.
Навигация по вкладкам (вкладочная таб-навигация, точечная) соответствует Tabs Pattern.
- Навигация по вкладкам имеет роль
tablist
. - Элементы навигации по вкладкам имеют роль
presentation
. - Ссылки навигации по вкладкам имеют роль
tab
, состояниеaria-selected
, свойствоaria-controls
установленное на идентификатор соответствующего слайда и свойствоaria-label
.
Предыдущая/следующая навигация придерживается Button Pattern.
-
У элементов навигации предыдущий/следующий имеется свойство
aria-label
, свойствоaria-controls
установленное на идентификатор списка слайдов, и, если используется элемент<a>
, рольbutton
.
Взаимодействие с клавиатурой
Автозапуск (autoplay) останавливается, когда какой-либо элемент в компоненте «Слайд-шоу» получает фокус. Доступ к навигации по вкладкам можно получить с клавиатуры, используя следующие клавиши:
- Клавиши tab или shift+tab перемещают фокус на активную вкладку в навигации по вкладкам. Если фокус уже находится на активной вкладке, фокус переместится на следующий элемент за пределами навигации по вкладкам.
- Клавиши left/right arrow или up/down arrow, в зависимости от ориентации, позволяют перемещаться по вкладкам. Соответствующий слайд станет активным автоматически. Если фокус находится на последней вкладке, он перемещается на первую вкладку.
- Клавиши home или end перемещают фокус на первую или последнюю вкладку.
Интернационализация
Ключ | По умолчанию | Описание |
---|---|---|
next |
Next Slide |
aria-label для кнопки следующего слайда. |
previous |
Previous Slide |
aria-label для кнопки предыдущего слайда. |
slideX |
Slide %s |
aria-label для кнопки слайдера пагинации. |
slideLabel |
%s of %s |
aria-label для слайда. |
Подробнее о переводе компонентов.