Компонент Слайдер 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="" width="" height="" alt="">
</li>
</ul>
</div>
-
-
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider> <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m"> <li> <img src="/demo/img/slider1.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">1</div> </div> </li> <li> <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">2</div> </div> </li> <li> <img src="/demo/img/slider3.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">3</div> </div> </li> <li> <img src="/demo/img/slider4.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">4</div> </div> </li> <li> <img src="/demo/img/slider5.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">5</div> </div> </li> <li> <img src="/demo/img/slider1.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">6</div> </div> </li> <li> <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">7</div> </div> </li> <li> <img src="/demo/img/slider3.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">8</div> </div> </li> <li> <img src="/demo/img/slider4.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">9</div> </div> </li> <li> <img src="/demo/img/slider5.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">10</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>
Совет
Чтобы лениво загружать изображения в слайды, используйте атрибут loading="lazy"
.
Slider автоматически удалит этот атрибут с изображений на соседних слайдах.
Контейнер
Класс .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="" width="" height="" 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="" width="" height="" alt="">
</li>
</ul>
</div>
-
-
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider> <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@m uk-grid"> <li> <div class="uk-panel"> <img src="/demo/img/slider1.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">1</div> </div> </div> </li> <li> <div class="uk-panel"> <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">2</div> </div> </div> </li> <li> <div class="uk-panel"> <img src="/demo/img/slider3.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">3</div> </div> </div> </li> <li> <div class="uk-panel"> <img src="/demo/img/slider4.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">4</div> </div> </div> </li> <li> <div class="uk-panel"> <img src="/demo/img/slider5.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">5</div> </div> </div> </li> <li> <div class="uk-panel"> <img src="/demo/img/slider1.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">6</div> </div> </div> </li> <li> <div class="uk-panel"> <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">7</div> </div> </div> </li> <li> <div class="uk-panel"> <img src="/demo/img/slider3.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">8</div> </div> </div> </li> <li> <div class="uk-panel"> <img src="/demo/img/slider4.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">9</div> </div> </div> </li> <li> <div class="uk-panel"> <img src="/demo/img/slider5.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">10</div> </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>
По центру
Центрирование
По умолчанию элементы слайдера всегда выровнены по левому краю. Чтобы центрировать элементы списка, просто добавьте к атрибуту center: true
. Готово! Слайдер по центру, а боковые картинки частично выглядывают по сторонам.
<div uk-slider="center: true">...</div>
-
-
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="center: true"> <ul class="uk-slider-items uk-grid"> <li class="uk-width-3-4"> <div class="uk-panel"> <img src="/demo/img/photo.jpg" width="900" height="600" alt="Слайдер" loading="lazy"> <div class="uk-position-center uk-panel"> <div class="uk-h1">1</div> </div> </div> </li> <li class="uk-width-3-4"> <div class="uk-panel"> <img src="/demo/img/dark.jpg" width="900" height="600" alt="Слайдер" loading="lazy"> <div class="uk-position-center uk-panel"> <div class="uk-h1">2</div> </div> </div> </li> <li class="uk-width-3-4"> <div class="uk-panel"> <img src="/demo/img/light.jpg" width="900" height="600" alt="Слайдер" loading="lazy"> <div class="uk-position-center uk-panel"> <div class="uk-h1">3</div> </div> </div> </li> <li class="uk-width-3-4"> <div class="uk-panel"> <img src="/demo/img/photo2.jpg" width="900" height="600" alt="Слайдер" loading="lazy"> <div class="uk-position-center uk-panel"> <div class="uk-h1">4</div> </div> </div> </li> <li class="uk-width-3-4"> <div class="uk-panel"> <img src="/demo/img/photo3.jpg" width="900" height="600" alt="Слайдер" loading="lazy"> <div class="uk-position-center uk-panel"> <div class="uk-h1">5</div> </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>
В этом примере добавлен класс .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>
-
-
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="sets: true"> <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@m"> <li> <img src="/demo/img/slider1.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">1</div> </div> </li> <li> <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">2</div> </div> </li> <li> <img src="/demo/img/slider3.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">3</div> </div> </li> <li> <img src="/demo/img/slider4.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">4</div> </div> </li> <li> <img src="/demo/img/slider5.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">5</div> </div> </li> <li> <img src="/demo/img/slider1.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">6</div> </div> </li> <li> <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">7</div> </div> </li> <li> <img src="/demo/img/slider3.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">8</div> </div> </li> <li> <img src="/demo/img/slider4.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">9</div> </div> </li> <li> <img src="/demo/img/slider5.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">10</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>
Навигация
Для навигации по слайдам используйте атрибут 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>
-
-
<div uk-slider> <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1"> <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m"> <li> <img src="/demo/img/slider1.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">1</div> </div> </li> <li> <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">2</div> </div> </li> <li> <img src="/demo/img/slider3.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">3</div> </div> </li> <li> <img src="/demo/img/slider4.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">4</div> </div> </li> <li> <img src="/demo/img/slider5.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">5</div> </div> </li> <li> <img src="/demo/img/slider1.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">6</div> </div> </li> <li> <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">7</div> </div> </li> <li> <img src="/demo/img/slider3.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">8</div> </div> </li> <li> <img src="/demo/img/slider4.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">9</div> </div> </li> <li> <img src="/demo/img/slider5.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">10</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-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>
-
-
<div uk-slider> <div class="uk-position-relative"> <div class="uk-slider-container uk-light"> <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m"> <li> <img src="/demo/img/slider1.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">1</div> </div> </li> <li> <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">2</div> </div> </li> <li> <img src="/demo/img/slider3.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">3</div> </div> </li> <li> <img src="/demo/img/slider4.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">4</div> </div> </li> <li> <img src="/demo/img/slider5.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">5</div> </div> </li> <li> <img src="/demo/img/slider1.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">6</div> </div> </li> <li> <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">7</div> </div> </li> <li> <img src="/demo/img/slider3.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">8</div> </div> </li> <li> <img src="/demo/img/slider4.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">9</div> </div> </li> <li> <img src="/demo/img/slider5.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">10</div> </div> </li> </ul> </div> <div class="uk-hidden@s uk-light"> <a class="uk-position-center-left uk-position-small" href="#" uk-slidenav-previous uk-slider-item="previous"></a> <a class="uk-position-center-right uk-position-small" href="#" uk-slidenav-next uk-slider-item="next"></a> </div> <div class="uk-visible@s"> <a class="uk-position-center-left-out uk-position-small" href="#" uk-slidenav-previous uk-slider-item="previous"></a> <a class="uk-position-center-right-out uk-position-small" href="#" uk-slidenav-next uk-slider-item="next"></a> </div> </div> <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></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="" width="" height="" alt="" uk-cover>
</div>
</li>
</ul>
</div>
-
-
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="center: true"> <ul class="uk-slider-items uk-grid uk-grid-match" uk-height-viewport="offset-top: true; offset-bottom: 30 "> <li class="uk-width-3-4"> <div class="uk-cover-container"> <img src="/demo/img/photo.jpg" alt="Слайдер" uk-cover loading="lazy"> <div class="uk-position-center uk-panel"> <div class="uk-h1">1</div> </div> </div> </li> <li class="uk-width-3-4"> <div class="uk-cover-container"> <img src="/demo/img/dark.jpg" alt="Слайдер" uk-cover loading="lazy"> <div class="uk-position-center uk-panel"> <div class="uk-h1">2</div> </div> </div> </li> <li class="uk-width-3-4"> <div class="uk-cover-container"> <img src="/demo/img/light.jpg" alt="Слайдер" uk-cover loading="lazy"> <div class="uk-position-center uk-panel"> <div class="uk-h1">3</div> </div> </div> </li> <li class="uk-width-3-4"> <div class="uk-cover-container"> <img src="/demo/img/photo2.jpg" alt="Слайдер" uk-cover loading="lazy"> <div class="uk-position-center uk-panel"> <div class="uk-h1">4</div> </div> </div> </li> <li class="uk-width-3-4"> <div class="uk-cover-container"> <img src="/demo/img/photo3.jpg" alt="Слайдер" uk-cover loading="lazy"> <div class="uk-position-center uk-panel"> <div class="uk-h1">5</div> </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>
Контент
Добавление контента в слайдер, карусель
Слайдер не ограничен изображениями. Любой контент может быть использован в карусели, к примеру, текст, видео, изображения с наложением текста или эффект Кена Бернса.
Пример
Карусель с использованием компонента Card.
-
-
<div uk-slider="center: true"> <div class="uk-position-relative uk-margin-small-top 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" width="900" height="600" alt="Слайдер" loading="lazy"> </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" width="900" height="600" alt="Слайдер" loading="lazy"> </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" width="900" height="600" alt="Слайдер" loading="lazy"> </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" width="900" height="600" alt="Слайдер" loading="lazy"> </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" width="900" height="600" alt="Слайдер" loading="lazy"> </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" width="900" height="600" alt="Слайдер" loading="lazy"> </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" width="900" height="600" alt="Слайдер" loading="lazy"> </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" width="900" height="600" alt="Слайдер" loading="lazy"> </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" width="900" height="600" alt="Слайдер" loading="lazy"> </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="" width="" height="" alt="">
<div class="uk-position-center">
<!-- Контент... -->
</div>
</li>
</ul>
</div>
.uk-light
или .uk-dark
из компонента Инверсия или используйте Оверлей, чтобы добавить любой стиль с полем оверлея.
-
-
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider> <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m"> <li> <img src="/demo/img/slider1.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">1</div> </div> </li> <li> <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">2</div> </div> </li> <li> <img src="/demo/img/slider3.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">3</div> </div> </li> <li> <img src="/demo/img/slider4.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">4</div> </div> </li> <li> <img src="/demo/img/slider5.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">5</div> </div> </li> <li> <img src="/demo/img/slider1.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">6</div> </div> </li> <li> <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">7</div> </div> </li> <li> <img src="/demo/img/slider3.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">8</div> </div> </li> <li> <img src="/demo/img/slider4.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">9</div> </div> </li> <li> <img src="/demo/img/slider5.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1">10</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>
Параллакс-эффекты
Добавление параллакс-эффектов в слайдер, карусель
Добавьте атрибут uk-slider-parallax
к любому элементу внутри слайдов, чтобы анимировать его вместе с анимацией слайдера. Добавьте опцию с желаемыми значениями анимации для каждого свойства CSS, которое вы хотите анимировать. Определите хотя бы одно начальное и конечное значение. Это можно сделать, передав два значения через запятую.
Эта функциональность унаследована из компонента Параллакс и позволяет анимировать свойства CSS в зависимости от положения прокрутки анимации слайдера.
Посмотрите на возможные свойства, которые можно анимировать.
<div uk-slider>
<ul class="uk-slider-items">
<li>
<img src="" width="" height="" 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>
-
-
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider> <ul class="uk-slider-items uk-grid uk-grid-small"> <li class="uk-width-4-5"> <div class="uk-panel"> <img src="/demo/img/photo.jpg" width="1800" height="1200" alt="Слайдер" loading="lazy"> <div class="uk-position-center uk-text-center"> <h5 class="uk-h1" uk-slider-parallax="x: 100,-100">Параллакс</h5> <p uk-slider-parallax="x: 200,-200">К элементу внутри слайдов.</p> </div> </div> </li> <li class="uk-width-4-5"> <div class="uk-panel"> <img src="/demo/img/dark.jpg" width="1800" height="1200" alt="Слайдер" loading="lazy"> <div class="uk-position-center uk-text-center"> <h5 class="uk-h1" uk-slider-parallax="x: 100,-100">Эффекты</h5> <p uk-slider-parallax="x: 200,-200">Вместе с анимацией слайдера.</p> </div> </div> </li> <li class="uk-width-4-5"> <div class="uk-panel"> <img src="/demo/img/light.jpg" width="1800" height="1200" alt="Слайдер" loading="lazy"> <div class="uk-position-center uk-text-center"> <h5 class="uk-h1" uk-slider-parallax="x: 100,-100; color: #ff0000,#00ff48,#ffffff">Параллакс</h5> <p uk-slider-parallax="x: 200,-200">Позволяет анимировать свойства CSS.</p> </div> </div> </li> <li class="uk-width-4-5"> <div class="uk-panel"> <img src="/demo/img/photo2.jpg" width="1800" height="1200" alt="Слайдер" loading="lazy"> <div class="uk-position-center uk-text-center"> <h5 class="uk-h1" uk-slider-parallax="x: 100,-100">Карусель</h5> <p uk-slider-parallax="x: 200,-200">С желаемыми значениями анимации.</p> </div> </div> </li> <li class="uk-width-4-5"> <div class="uk-panel"> <img src="/demo/img/photo3.jpg" width="1800" height="1200" alt="Слайдер" loading="lazy"> <div class="uk-position-center uk-text-center"> <h5 class="uk-h1" uk-slider-parallax="x: 100,-100">Параллакс</h5> <p uk-slider-parallax="x: 200,-200">Контент продолжает анимироваться.</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>
Контент переходы
Добавьте к атрибуту clsActivated: uk-transition-active
, чтобы классы перехода из компонента Плавные переходы автоматически срабатывали внутри слайдов. В отличие от параллакс эффекта переходы "не прикрепляются" к анимации слайдера и начинают воспроизводиться независимо после анимации слайдера.
<div uk-slider="clsActivated: uk-transition-active">
<ul class="uk-slider-items">
<li>
<img src="" width="" height="" alt="">
<div class="uk-position-bottom">
<div class="uk-transition-slide-bottom">
<!-- Здесь расположен контент -->
</div>
</div>
</li>
</ul>
</div>
При создании слайдера и размещении классического заголовка с описанием, совместно с плавными переходами, используется компонент Наложение (Overlay).
-
-
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="clsActivated: uk-transition-active; center: true"> <ul class="uk-slider-items uk-grid"> <li class="uk-width-3-4"> <div class="uk-panel"> <img src="/demo/img/photo.jpg" width="900" height="600" alt="Слайдер" loading="lazy"> <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom"> <h6 class="uk-h3 uk-margin-remove">Bottom</h6> <p class="uk-margin-remove">Местные всезнайки рассуждали, что никто не найдет сокровищ.</p> </div> </div> </li> <li class="uk-width-3-4"> <div class="uk-panel"> <img src="/demo/img/dark.jpg" width="900" height="600" alt="Слайдер" loading="lazy"> <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom"> <h6 class="uk-h3 uk-margin-remove">Bottom</h6> <p class="uk-margin-remove">Цено напряжения воли вспомнить хоть что-нибудь.</p> </div> </div> </li> <li class="uk-width-3-4"> <div class="uk-panel"> <img src="/demo/img/light.jpg" width="900" height="600" alt="Слайдер" loading="lazy"> <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom"> <h6 class="uk-h3 uk-margin-remove">Bottom</h6> <p class="uk-margin-remove">Местные задумали, что никто и не найдет письмена.</p> </div> </div> </li> <li class="uk-width-3-4"> <div class="uk-panel"> <img src="/demo/img/photo2.jpg" width="900" height="600" alt="Слайдер" loading="lazy"> <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom"> <h6 class="uk-h3 uk-margin-remove">Bottom</h6> <p class="uk-margin-remove">Ценой колоссальной воли расписать хоть что-нибудь.</p> </div> </div> </li> <li class="uk-width-3-4"> <div class="uk-panel"> <img src="/demo/img/photo3.jpg" width="900" height="600" alt="Слайдер" loading="lazy"> <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom"> <h6 class="uk-h3 uk-margin-remove">Bottom</h6> <p class="uk-margin-remove">Древние сочиняли, что никто не найдет давних сокровищ.</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>
Переходы при наведении
Чтобы переключать переходы при наведении, используйте класс .uk-transition-toggle
из компонента Плавные переходы и tabindex="0"
.
Плавный переход элементов будет срабатывать при наведении или когда элемент имеет фокус.
<div uk-slider>
<ul class="uk-slider-items">
<li class="uk-transition-toggle" tabindex="0">
<img src="" width="" height="" alt="">
<div class="uk-position-bottom">
<div class="uk-transition-slide-bottom">
<!-- Контент идет здесь -->
</div>
</div>
</li>
</ul>
</div>
-
-
<div uk-slider> <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-light"> <li class="uk-transition-toggle" tabindex="0"> <img src="/demo/img/slider1.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1 uk-transition-slide-bottom-small">А</div> </div> </li> <li class="uk-transition-toggle" tabindex="0"> <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1 uk-transition-slide-bottom-small">Б</div> </div> </li> <li class="uk-transition-toggle" tabindex="0"> <img src="/demo/img/slider3.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1 uk-transition-slide-bottom-small">В</div> </div> </li> <li class="uk-transition-toggle" tabindex="0"> <img src="/demo/img/slider4.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1 uk-transition-slide-bottom-small">Г</div> </div> </li> <li class="uk-transition-toggle" tabindex="0"> <img src="/demo/img/slider5.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1 uk-transition-slide-bottom-small">Д</div> </div> </li> <li class="uk-transition-toggle" tabindex="0"> <img src="/demo/img/slider1.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1 uk-transition-slide-bottom-small">Е</div> </div> </li> <li class="uk-transition-toggle" tabindex="0"> <img src="/demo/img/slider2.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1 uk-transition-slide-bottom-small">Ё</div> </div> </li> <li class="uk-transition-toggle" tabindex="0"> <img src="/demo/img/slider3.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1 uk-transition-slide-bottom-small">Ж</div> </div> </li> <li class="uk-transition-toggle" tabindex="0"> <img src="/demo/img/slider4.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1 uk-transition-slide-bottom-small">З</div> </div> </li> <li class="uk-transition-toggle" tabindex="0"> <img src="/demo/img/slider5.jpg" width="400" height="600" alt="Слайдер"> <div class="uk-position-center uk-panel"> <div class="uk-h1 uk-transition-slide-bottom-small">И</div> </div> </li> </ul> <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul> </div>
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), роль
presentation
и свойство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 перемещают фокус на первую или последнюю вкладку.
Интернационализация
Ключ | По умолчанию | Описание |
---|---|---|
next |
Next Slide |
aria-label для кнопки следующего слайда. |
previous |
Previous Slide |
aria-label для кнопки предыдущего слайда. |
slideX |
Slide %s |
aria-label для кнопки пагинации слайдера. |
slideLabel |
%s of %s |
aria-label для слайда. |
Подробнее о переводе компонентов.