Компонент Слайдер

Многофункциональная карусель. Создайте отзывчивый слайдер. Добавление параллакс-эффектов. Переключение элементов сразу комплектами. Размещение любого контента с навигацией вне карусели.

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

Slider: Создание

Чтобы применить компонент Слайдер добавьте атрибут uk-slider к элементу контейнера и создайте список слайдов с классом .uk-slider-items. Добавьте изображение или любой другой контент для каждого элемента списка.

Чтобы определить ширину элементов карусели-слайдера используйте компонент Ширина. Чтобы определить ширину всех элементов карусели можно применить классы .uk-child-width-*, либо применить индивидуальную ширину для каждого элемента списка используя классы .uk-width-*. Если конкретная ширина не установлена, то ширина каждого элемента будет равна размерам самого содержимого.

<div uk-slider>
    <div class="uk-slider-items uk-child-width-1-3@s uk-child-width-1-4@">
        <div>
            <img src="" width="" height="" alt="">
        </div>
    </div>
</div>

Совет Чтобы лениво загружать изображения в слайды, используйте атрибут loading="lazy". Компонент Slider автоматически удалит этот атрибут с изображений на соседних слайдах.

Контейнер

Класс .uk-slider-container отвечает за "отсечение" элементов слайдера. По умолчанию атрибут uk-slider применяет этот класс к тому же элементу где он сам расположен. Кроме того, вы можете добавить этот класс вручную к любому элементу в слайдере. Таким образом, вы можете контролировать, какой контейнер обрезает элементы слайдера.

<div uk-slider>

    <div class="uk-slider-container">
        <div class="uk-slider-items uk-child-width-1-4">
            <div>
                <img src="" width="" height="" alt="">
            </div>
        </div>
    </div>

</div>

Поскольку требуется контейнер отсечения, тени элементов также обрезаются. Чтобы решить вопрос с контейнером и предотвратить обрезку теней блока, добавьте класс .uk-slider-container-offset.

Зазоры

Добавление зазоров между элементами

Чтобы добавить зазоры к элементам карусели, добавьте к слайдеру класс .uk-grid используя компонент Сетка / Grid. Элементы будут расположены в соответствии с зазорами сетки. Для изменения зазора вы можете использовать такие модификаторы, как .uk-grid-small, .uk-grid-medium и т.п..

<div uk-slider>
    <div class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-3@m uk-grid">
        <div>
            <img src="" width="" height="" alt="">
        </div>
    </div>
</div>

По центру

Центрирование

По умолчанию элементы слайдера всегда выровнены по левому краю. Чтобы центрировать элементы списка, просто добавьте к атрибуту center: true. Готово! Слайдер по центру, а боковые картинки частично выглядывают по сторонам.

<div uk-slider="center: true">...</div>

В этом примере добавлен класс .uk-width-3-4 к каждому элементу, что делает слайдер очень похожим на слайд-шоу.

Автозапуск

Чтобы активировать автозапуск слайдера, просто добавьте к атрибуту опцию autoplay: true.

<div uk-slider="autoplay: true">...</div>

Вы также можете установить интервал в миллисекундах между переключением слайдов, добавив autoplay-interval: 6000. Чтобы приостановить автопроизведение при наведении курсора, используйте pause-on-hover: true.

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

По умолчанию бесконечная прокрутка у слайдера включена. Чтобы отключить это поведение, просто добавьте в атрибут опцию finite: true.

<div uk-slider="finite: true">...</div>

Комплекты слайдера

Чтобы переключать/передвигать сразу комплектом (набор видимых в настоящее время элементов), а не по одному, просто добавьте к атрибуту sets: true.

<div uk-slider="sets: true">...</div>

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

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

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

<div uk-slider>

    <div class="uk-slider-items">...</div>

    <a href uk-slider-item="previous">...</a>
    <a href uk-slider-item="next">...</a>

    <ul>
        <li uk-slider-item="0"><a href>...</a></li>
        <li uk-slider-item="1"><a href>...</a></li>
        <li uk-slider-item="2"><a href>...</a></li>
    </ul>

</div>

Гибкость компонента Слайдер позволяет использовать любые другие компоненты UIkit 3 для навигации по элементам. Например, компоненты Slidenav, Dotnav и Thumbnav могут использоваться для стилизации навигации в слайдере.

Если в элементах навигации нет конкретного содержимого элемента, вы также можете добавить класс .uk-slider-nav вместо добавления элементов навигации вручную. Он будет генерировать свои элементы автоматически, используя <li><a href></a></li> в качестве разметки. Это полезный и короткий вариант при использовании Dotnav.

<div uk-slider>

    <div class="uk-slider-items">
        ...
    </div>

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

</div>

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

Навигация вне слайдера

Чтобы разместить навигацию вне слайдера (карусели) добавьте класс .uk-position-center-left-out и .uk-position-center-right-out из компонента Позиционирование к навигации previous и next. Убедитесь, что класс .uk-slider-container, который отвечает за отсечение элементов слайдера, расположен отдельно.

<div uk-slider>

    <div class="uk-position-relative">

        <div class="uk-slider-container">
            <div class="uk-slider-items">...</div>
        </div>

        <a class="uk-position-center-left-out" href uk-slider-item="previous">...</a>
        <a class="uk-position-center-right-out" href uk-slider-item="next">...</a>

    </div>

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

</div>

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

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

<div uk-slider="parallax: true">…</div>

Чтобы настроить длительность параллакса, задайте параметры parallax-start и parallax-end.

Параметр parallax-start: Определяет, когда начинается анимация. Значение по умолчанию 0 означает, что верхняя граница слайдера и нижняя граница области просмотра пересекаются.
Параметр parallax-end: Определяет, когда анимация заканчивается. Значение по умолчанию 0 означает, что нижняя граница слайдера и верхняя граница области просмотра пересекаются.

Значения могут быть заданы в любых единицах измерения, а именно vh, % и px. Единица % относится к высоте слайдера. Оба параметра позволяют использовать базовые математические операнды + и -.

<div uk-slider="parallax: true; parallax-start: 100%; parallax-end: 100%;">…</div>

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

Viewport

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

Используйте компонент Cover, чтобы изображения покрывали всю область элемента и обрезались. Класс .uk-grid-match из компонента Grid соответствует высоте прямого дочернего элемента каждого элемента. Это полезно в этом примере, поскольку дочерний элемент теперь применяет ту же ширину и высоту, что и элемент списка.

<div uk-slider>
    <div class="uk-slider-items uk-child-width-1-3@m uk-grid-match" uk-height-viewport="min-height: 300">
        <div>
            <div class="uk-cover-container">
                <img src="" width="" height="" alt="" uk-cover>
            </div>
        </div>
    </div>
</div>

Фото 1 — В этом примере высота слайдера установлена на 70% высоты области просмотра.

Фото 2 — В этом примере высота слайдера установлена на 70% высоты области просмотра.

Контент

Добавление контента в слайдер / карусель

Слайдер не ограничен изображениями. Любой контент может быть использован в карусели, к примеру, текст, видео, изображения с наложением текста.

Так как для эффекта слайдера требуется контейнер "обрезки", то тени элементов содержимого также обрезаются. Чтобы получить наилучший визуальный результат, можно использовать режим uk-slider="center: true".

Пример

Если ваши элементы контента содержат тень от блока, то задача решается добавлением класса .uk-slider-container-offset.

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

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

<div uk-slider>
    <div class="uk-slider-items">
        <div>
            <img src="" width="" height="" alt="">
            <div class="uk-position-center">

                <!-- Контент... -->

            </div>
        </div>
    </div>
</div>

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

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

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

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

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

Посмотрите на возможные свойства, которые можно анимировать.

<div uk-slider>
    <div class="uk-slider-items">
        <div>
            <img src="" width="" height="" alt="">
            <div class="uk-position-center">

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

                    <!-- Контент идёт здесь -->

                </div>

            </div>
        </div>
    </div>
</div>

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

Для разных расстояний необходимы три значения:

Начало - слайд карусели стартует и анимация прибывает к центру,
Середина - слайд центрируется, хвастается содержимым на показ,
Конец - слайд отправляется с анимацией в свой путь, до новых встреч.

<div uk-slider-parallax="x: 300,0,-100">...</div>

Следующий пример определяет различные входящие и исходящие анимации. Контент перемещается, двигаясь от 100 до 0 и исчезает с 1 до 0.

<div uk-slider-parallax="x: 100,0,0; opacity: 1,1,0">...</div>

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

Добавьте к атрибуту clsActivated: uk-transition-active, чтобы классы перехода из компонента Плавные переходы автоматически срабатывали внутри слайдов. В отличие от параллакс эффекта переходы "не прикрепляются" к анимации слайдера и начинают воспроизводиться независимо после анимации слайдера.

<div uk-slider="clsActivated: uk-transition-active">
    <div class="uk-slider-items">
        <div>
            <img src="" width="" height="" alt="">
            <div class="uk-position-bottom">

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

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

                </div>

            </div>
        </div>
    </div>
</div>

При создании слайдера и размещении классического заголовка с описанием, совместно с плавными переходами, используется компонент Наложение (Overlay).

Переходы при наведении

Чтобы переключать переходы при наведении, используйте класс .uk-transition-toggle из компонента Плавные переходы и tabindex="0". Плавный переход элементов будет срабатывать при наведении или когда элемент имеет фокус.

<div uk-slider>
    <div class="uk-slider-items">
        <div class="uk-transition-toggle" tabindex="0">
            <img src="" width="" height="" alt="">
            <div class="uk-position-bottom">

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

                    <!-- Контент идет здесь -->

                </div>

            </div>
        </div>
    </div>
</div>

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

При использовании компонента Slider к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Опция	Значение	По умолчанию	Описание
`autoplay`	Boolean	`false`	Автовоспроизведение слайдера.
`autoplay-interval`	Number	`7000`	Задержка между переключением слайдов в режиме автовоспроизведения.
`center`	Boolean	`false`	Центрирование активного слайда.
`draggable`	Boolean	`true`	Включить перетаскивание.
`easing`	String	`ease`	The animation easing (CSS timing functions or cubic-bezier).
`finite`	Boolean	`false`	Отключить бесконечную прокрутку.
`index`	Number	`0`	Элемент слайдера для отображения.Индекс начинается с 0.
`active`	String	`all`	Элемент/элементы слайдера, к которым будет применен активный класс перехода (all, first).
`pause-on-hover`	Boolean	`true`	Приостановить режим автозапуска при наведении.
`sets`	Boolean	`false`	Слайд в наборах (комплектах).
`velocity`	Number	`1`	Скорость анимации (пиксель / мс).

JavaScript

Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.

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

UIkit.slider(element, options);

События

Следующие события будут инициированы для элементов компонента «Slider»:

Имя события	Описание
`beforeitemshow`	Срабатывает до отображения элемента.
`itemshow`	Срабатывает после отображения элемента.
`itemshown`	Запускается после завершения анимации показанного элемента.
`beforeitemhide`	Срабатывает до того, как элемент скрыт.
`itemhide`	Срабатывает после запуска анимации скрытия элемента.
`itemhidden`	Срабатывает после завершения анимации скрытия элемента.

Методы

Для компонента «Slider» доступны следующие методы:

Show

UIkit.slider(element).show(index);

Показывает элемент слайдера.

startAutoplay

UIkit.slider(element).startAutoplay();

Запускает автозапуск слайда.

stopAutoplay

UIkit.slider(element).stopAutoplay();

Останавливает автозапуск слайдера.

Доступность

Компонент Slider соответствует 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.

У элементов навигации prev/next есть свойство aria-label, свойство aria-controls установленное на идентификатор списка слайдов, и, если используется элемент <a>, то роль button.

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

Автовоспроизведение (autoplay) останавливается, когда любой элемент в компоненте Slider получает фокус. Доступ к навигации по вкладкам можно получить с клавиатуры, используя следующие клавиши.

Клавиши tab или shift+tab перемещают фокус на активную вкладку в навигации по вкладкам. Если фокус уже находится на активной вкладке, фокус переместится на следующий элемент за пределами навигации по вкладкам.
Клавиши left/right arrow или right/down arrow в зависимости от ориентации, позволяют перемещаться по вкладкам. Соответствующий слайд станет активным автоматически. Если фокус находится на последней вкладке, он перемещается на первую вкладку.
Клавиши home или end перемещают фокус на первую или последнюю вкладку.

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

Компонент Slider использует следующие строки перевода:
Ключ	По умолчанию	Описание
`next`	`Next Slide`	`aria-label` для кнопки следующего слайда.
`previous`	`Previous Slide`	`aria-label` для кнопки предыдущего слайда.
`slideX`	`Slide %s`	`aria-label` для кнопки пагинации слайдера.
`slideLabel`	`%s of %s`	`aria-label` для слайда.

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

Добавление зазоров между элементами

Центрирование

Навигация вне слайдера

Viewport

Добавление контента в слайдер / карусель

Пример

Cлайдер

Карусель

Карточка

Карта

Заголовок

Карусель

Карточка

Карта

Заголовок

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

Параллакс

Эффекты

Параллакс

Карусель

Параллакс

Текст

Переход

Эффект

Контент

Слайд

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

События

Методы

Show

startAutoplay

stopAutoplay

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

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