Компонент Слайд-шоу Slideshow

Создайте адаптивное слайд-шоу с изображениями и видео. Различные режимы анимации при переходах. Пользовательский интервал между переключением слайдов. Слайд-шоу на весь экран с контентом в любом месте слайда и бесконечной прокруткой.

Компонент Слайд-шоу полностью адаптивен и поддерживает сенсорную и swipe-навигацию, а также перетаскивание мышью для ПК. Он даже ускоряется вместе с вами, чтобы не отставать от вашего темпа, когда вы нажимаете на предыдущую и следующую навигацию. Все анимации аппаратно-ускоренные для более плавной работы.

Руководство

Чтобы применить этот компонент, добавьте атрибут uk-slideshow к элементу контейнера и создайте список слайдов с классом .uk-slideshow-items. Добавьте изображение на заднем плане каждого слайда, с использованием атрибута uk-cover из компонента Cover.

<div uk-slideshow>
    <ul class="uk-slideshow-items">
        <li>
            <img src="" alt="" uk-cover>
        </li>
    </ul>
</div>

Совет Чтобы лениво загружать изображения в слайд-шоу по принципу «ленивой загрузки» (Lazy loading), используйте атрибут loading="lazy". Slideshow автоматически удалит этот атрибут с изображений на соседних слайдах.

Анимации

Использование анимации в слайд-шоу

По умолчанию в слайд-шоу используется анимация slide. Вы можете установить опцию animation для использования другой анимации. Возможны следующие значения:

Анимация	Описание
`slide`	Слайды скользят в бок.
`fade`	Слайды плавно исчезают и появляются.
`scale`	Слайды масштабируются и исчезают.
`pull`	Слайды будто вытягиваются из колоды; "срезает колоду".
`push`	Слайды скользят будто накладываются на колоду.

<div uk-slideshow="animation: fade">...</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>

Мин. / Макс. Высота

По умолчанию высота слайд-шоу соответствует определенному соотношению. Минимальная или максимальная высота может быть установлена с помощью параметров min-height и max-height.

<div uk-slideshow="min-height: 300; max-height: 600">...</div>

Высота окна просмотра

Viewport

Добавление атрибута uk-height-viewport из компонента Высота элементов в список элементов слайд-шоу увеличит высоту, чтобы заполнить весь видовой экран. Вы можете установить опцию минимальной высоты min-height, чтобы определить минимальную высоту.

<div uk-slideshow="ratio: false">
    <ul class="uk-slideshow-items" uk-height-viewport="min-height: 300">...</ul>
</div>

Этот пример демонстрирует 70% высоты области просмотра.

Навигация в слайд-шоу

Для навигации по слайдам просто используйте атрибут uk-slideshow-item. Чтобы "сориентировать" слайды, установите атрибут каждого элемента навигации равным порядковому номеру соответствующего элемента слайд-шоу.

Элементы с атрибутом uk-slideshow-item должны находиться внутри контейнера uk-slideshow.

Установив в атрибут значения next и previous заставит переключать на соседние слайды.

<div uk-slideshow>

    <ul class="uk-slideshow-items">...</ul>

    <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>

    <ul class="uk-slideshow-items">...</ul>

    <ul class="uk-slideshow-nav uk-dotnav"></ul>

</div>

Примечание Для лучшей видимости навигации на темных или светлых изображениях добавьте класс .uk-light или .uk-dark из компонента Инверсия.

Параллакс-анимация

Вместо пошаговой анимации с использованием элементов управления навигацией слайд-шоу может использовать плавную параллакс-анимацию, основанную на положении прокрутки в области просмотра. Просто добавьте к атрибуту parallax: true. Если в разметке задана навигация, она не будет доступна для кликов, но получит активное состояние текущего слайда.

<div uk-slideshow="parallax: true">…</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>

Видео

Слайд-шоу не ограничивается изображениями. Другие медиафайлы, например видео, можно размещать на заднем плане каждого слайда, используя атрибут uk-cover компонента Cover. Видео отключается и воспроизводится автоматически. Видео будет приостановлено, когда оно не видно, и возобновится, как только оно снова станет видимым.

<div uk-slideshow>
    <ul class="uk-slideshow-items">
        <li>
            <video src="" autoplay loop muted playsinline uk-cover></video>
        </li>
        <li>
            <iframe src="" uk-cover></iframe>
        </li>
    </ul>
</div>

Эффект «Ken Burns»

Чтобы добавить эффект Кена Бернса, оберните изображение в элемент div добавив классы .uk-position-cover и .uk-animation-kenburns. Вы также можете применить .uk-animation-reverse или один из классов .uk-transform-origin-* из компонента с полезностями - Utility, чтобы изменить эффект.

<div uk-slideshow>
    <ul class="uk-slideshow-items">
        <li>
            <div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-center-left">
                <img src="" alt="" uk-cover>
            </div>
        </li>
    </ul>
</div>

Наложение контента

Слайд-шоу с контентом в любом месте слайда

Добавьте наложение контента, используя компонент Позиционирование. Это позволяет размещать контент в любом месте слайда.

<div uk-slideshow>
    <ul class="uk-slideshow-items">
        <li>
            <img src="" alt="" uk-cover>
            <div class="uk-position-center uk-position-small">

                <!-- Здесь находится контент -->

            </div>
        </li>
    </ul>
</div>

Примечание Чтобы адаптировать контент для лучшей видимости каждого изображения, добавьте класс .uk-light или .uk-dark из компонента Инверсия или используйте Оверлей, чтобы отобразить содержимое в соответствующем месте и виде.

Параллакс эффекты

Добавление параллакс эффектов в слайд-шоу

Добавьте атрибут uk-slideshow-parallax к любому элементу внутри слайдов, чтобы анимировать его вместе с анимацией слайд-шоу. Добавьте параметр с желаемыми значениями анимации для каждого свойства CSS, которое вы хотите анимировать. Определите хотя бы одно начальное и конечное значение. Это можно сделать, передав два значения через запятую.

Эта функциональность унаследована из компонента Parallax и позволяет анимировать свойства CSS в зависимости от положения прокрутки анимации слайд-шоу. Посмотрите на возможные свойства, которые можно анимировать.

<div uk-slideshow>
    <ul class="uk-slideshow-items">
        <li>
            <img src="" alt="" uk-cover>
            <div class="uk-position-center uk-position-small">

                <div uk-slideshow-parallax="x: 100,-100">

                    <!-- Контент расположен здесь -->

                </div>

            </div>
        </li>
    </ul>
</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>

Расширенные эффекты

Параллакс-атрибут можно использовать для добавления дополнительных эффектов к анимации слайд-шоу. В следующем примере анимация push расширяет свои возможности за счет затемнения и уменьшения изображения при его скольжении.

<div uk-slideshow="animation: push">
    <ul class="uk-slideshow-items">
        <li>
            <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>
        </li>
    </ul>
</div>

Контент переходы

Классы переходов из компонента Плавные переходы запускаются автоматически внутри слайдов. В отличие от эффекта параллакса переходы не прикрепляются к анимации слайд-шоу и начинают воспроизводиться независимо после анимации слайд-шоу.

<div uk-slideshow>
    <ul class="uk-slideshow-items">
        <li>
            <img src="" alt="" uk-cover>
            <div class="uk-position-bottom uk-position-small">

                <div class="uk-transition-slide-bottom">

                    <!-- Здесь расположен контент -->

                </div>

            </div>
        </li>
    </ul>
</div>

Вместе с компонентом Overlay контент-переходы отображаются в виде классического описания в слайд-шоу.

Опции компонента

При использовании компонента 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), роль presentation и свойство 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` для слайда.

Подробнее о переводе компонентов.

Руководство

Анимации

Использование анимации в слайд-шоу

Slide

Fade

Scale

Pull

Push

Автозапуск

Автозапуск cлайд-шоу

Бесконечная прокрутка

Соотношение

Параметр «Ratio»

Мин. / Макс. Высота

Высота окна просмотра

Viewport

Навигация

Навигация в слайд-шоу

Параллакс-анимация

Видео

Эффект «Ken Burns»

Наложение контента

Слайд-шоу с контентом в любом месте слайда

Center

Bottom

Overlay Bottom

Overlay Bottom Right

Параллакс эффекты

Добавление параллакс эффектов в слайд-шоу

Параллакс

Движение

Скольжение

Расширенные эффекты

Эффект

Скольжение

Анимация

Контент переходы

Bottom

Bottom

Left

Опции компонента

JavaScript

Инициализация

События

Методы

Show

startAutoplay

stopAutoplay

Доступность

Взаимодействие с клавиатурой

Интернационализация