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

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

Компонент Слайд-шоу полностью адаптивен и поддерживает сенсорную и 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>
Слайд-шоу 1
Слайд-шоу 2
Слайд-шоу 3
<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" 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>

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

Анимации

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

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

Анимация Описание
slide Слайды скользят в бок.
fade Слайды плавно исчезают и появляются.
scale Слайды масштабируются и исчезают.
pull Слайды будто вытягиваются из колоды; "срезает колоду".
push Слайды скользят будто накладываются на колоду.
<div uk-slideshow="animation: fade">...</div>

Slide

Слайд-шоу 1
Слайд-шоу 2
Слайд-шоу 3

Fade

Слайд-шоу 1
Слайд-шоу 2
Слайд-шоу 3

Scale

Слайд-шоу 1
Слайд-шоу 2
Слайд-шоу 3

Pull

Слайд-шоу 1
Слайд-шоу 2
Слайд-шоу 3

Push

Слайд-шоу 1
Слайд-шоу 2
Слайд-шоу 3
<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>
Слайд-шоу 1
Слайд-шоу 2
Слайд-шоу 3
<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>
Слайд-шоу 1
Слайд-шоу 2
Слайд-шоу 3
<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>
Слайд-шоу 1
Слайд-шоу 2
Слайд-шоу 3
<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 из компонента Инверсия.
Слайд-шоу 1
Слайд-шоу 2
Слайд-шоу 3
<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>
Слайд-шоу 1
Слайд-шоу 2
Слайд-шоу 3
<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>
Слайд-шоу 1
Слайд-шоу 2
Слайд-шоу 3
<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&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;playlist=SkVqJ1SGeL0&amp;modestbranding=1&amp;wmode=transparent&amp;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>
Слайд-шоу 1
Слайд-шоу 2
Слайд-шоу 3
<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 из компонента Инверсия или используйте Оверлей, чтобы отобразить содержимое в соответствующем месте и виде.
Слайд-шоу 1

Center

Я не просто учусь на своих ошибках...
Я, блин, постоянно повторяю пройденный материал!

Слайд-шоу 2

Bottom

Вежливость - это не только послать, но и проводить.

Слайд-шоу 3

Overlay Bottom

Ждать, когда соберется жена, - как скачивать что-то из интернета:
осталось 2 минуты, осталась 1 минута... Осталось 17 минут.

Слайд-шоу 2

Overlay Bottom Right

Если вы не материтесь за рулем, значит, вы не следите за дорогой.

<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>
Слайд-шоу 1

Параллакс

Ничего не просит и вежливо отказывается.

Слайд-шоу 2

Движение

Ох и не полюбила его хозяйка!

Слайд-шоу 3

Скольжение

Забренчала и натянулась золотым лучом.

<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>
Параллакс-слайд 1

Эффект

Нить судьбы пока еще на берегу.

Параллакс-слайд 2

Скольжение

Зажёг нестерпимым золотом бечеву.

Параллакс-слайд 3

Анимация

Шаг навстречу своей судьбе.

<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 контент-переходы отображаются в виде классического описания в слайд-шоу.

Слайд 1

Bottom

Великолепные рыцари прагали на мешках с золотом.

Слайд 2

Bottom

Богатства царевича были доставлены в его квартиру.

Слайд 3

Left

Давно мечтал о просторной собственной скамейке.

<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 для слайда.

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