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

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

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

Создание

Карусель

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

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

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

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

Контейнер

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

<div uk-slider>

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

</div>

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

Зазоры

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

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

<div uk-slider>
    <ul class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-3@m uk-grid">
        <li>
            <img src="" alt="">
        </li>
    </ul>
</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>

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

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

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

    <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">
            <ul class="uk-slider-items">...</ul>
        </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>

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

Viewport

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

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

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

Примечание В этом примере высота установлена на 70% высоты области просмотра.

Контент

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

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

Пример
Карусель с использованием компонента Card.

- Cлайдер
  
  Теория конечных целей идет далеко, когда она ограничивается, будущее предсуществует.
- Карусель
  
  Строго говоря, ничто не мешает нам вообразить себе, что в каком-нибудь одном индивиде.
- Карточка
  
  Предположим, что механическое воззрение правильно, что развитие состоит из ряда случайностей.
- Карта
  
  При этом сила доказательства будет пропорциональна степени удаленности взятых линий.
- Заголовок
  
  Согласно гипотезе производит изменение, по второй же она только делает выбор между ними.

<div uk-slider="center: true">
    <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
        <ul class="uk-slider-items uk-child-width-1-2@s uk-grid">
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="/demo/img/photo.jpg" alt="Слайдер">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Cлайдер</h3>
                        <p>Теория конечных целей идет далеко, когда она ограничивается, будущее предсуществует.</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="/demo/img/dark.jpg" alt="Слайдер">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Карусель</h3>
                        <p>Строго говоря, ничто не мешает нам вообразить себе, что в каком-нибудь одном индивиде.</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="/demo/img/light.jpg" alt="Слайдер">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Карточка</h3>
                        <p>Предположим, что механическое воззрение правильно, что развитие состоит из ряда случайностей.</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="/demo/img/photo2.jpg" alt="Слайдер">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Карта</h3>
                        <p>При этом сила доказательства будет пропорциональна степени удаленности взятых линий.</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="/demo/img/photo3.jpg" alt="Слайдер">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Заголовок</h3>
                        <p>Согласно гипотезе производит изменение, по второй же она только делает выбор между ними.</p>
                    </div>
                </div>
            </li>
        </ul>
        <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
        <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
    </div>
    <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>

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

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

Без обрезки теней

Слайдер без обрезки теней с использованием компонента Card.

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

<div class="uk-slider-container-offset" uk-slider>
    <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
        <ul class="uk-slider-items uk-child-width-1-2@s uk-grid">
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="/demo/img/dark.jpg" alt="Слайдер">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Карусель</h3>
                        <p>Строго говоря, ничто не мешает нам вообразить себе, что в каком-нибудь одном индивиде.</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="/demo/img/light.jpg" alt="Слайдер">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Карточка</h3>
                        <p>Предположим, что механическое воззрение правильно, что развитие состоит из ряда случайностей.</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="/demo/img/photo2.jpg" alt="Слайдер">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Карта</h3>
                        <p>При этом сила доказательства будет пропорциональна степени удаленности взятых линий.</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="/demo/img/photo3.jpg" alt="Слайдер">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">Заголовок</h3>
                        <p>Согласно гипотезе производит изменение, по второй же она только делает выбор между ними.</p>
                    </div>
                </div>
            </li>
        </ul>
        <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
        <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
    </div>
    <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>

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

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

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

                <!-- Содержание идет здесь -->

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

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

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

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

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

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

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

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

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

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

                </div>

            </div>
        </li>
    </ul>
</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">
    <ul class="uk-slider-items">
        <li>
            <img src="" alt="">
            <div class="uk-position-bottom">

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

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

                </div>

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

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

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

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

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

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

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

                </div>

            </div>
        </li>
    </ul>
</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.
`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();

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

Создание

Карусель

Контейнер

Зазоры

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

По центру

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

Автозапуск

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

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

Навигация

Навигация снаружи

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

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

Viewport

Контент

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

Cлайдер

Карусель

Карточка

Карта

Заголовок

Карусель

Карточка

Карта

Заголовок

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

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

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

Параллакс

Эффекты

Параллакс

Карусель

Параллакс

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

Bottom

Bottom

Bottom

Bottom

Bottom

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

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

Слайдер

JavaScript

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

События

Методы

Show

startAutoplay

stopAutoplay