Компонент Слайдер : 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>
-
-
<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" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">1</div> </div> </li> <li> <img src="/demo/img/slider2.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">2</div> </div> </li> <li> <img src="/demo/img/slider3.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">3</div> </div> </li> <li> <img src="/demo/img/slider4.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">4</div> </div> </li> <li> <img src="/demo/img/slider5.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">5</div> </div> </li> <li> <img src="/demo/img/slider1.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">6</div> </div> </li> <li> <img src="/demo/img/slider2.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">7</div> </div> </li> <li> <img src="/demo/img/slider3.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">8</div> </div> </li> <li> <img src="/demo/img/slider4.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">9</div> </div> </li> <li> <img src="/demo/img/slider5.jpg" 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-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>
-
-
<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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" alt=""> <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" alt=""> <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" alt=""> <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" alt=""> <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" alt=""> <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" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">1</div> </div> </li> <li> <img src="/demo/img/slider2.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">2</div> </div> </li> <li> <img src="/demo/img/slider3.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">3</div> </div> </li> <li> <img src="/demo/img/slider4.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">4</div> </div> </li> <li> <img src="/demo/img/slider5.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">5</div> </div> </li> <li> <img src="/demo/img/slider1.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">6</div> </div> </li> <li> <img src="/demo/img/slider2.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">7</div> </div> </li> <li> <img src="/demo/img/slider3.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">8</div> </div> </li> <li> <img src="/demo/img/slider4.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">9</div> </div> </li> <li> <img src="/demo/img/slider5.jpg" 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" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">1</div> </div> </li> <li> <img src="/demo/img/slider2.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">2</div> </div> </li> <li> <img src="/demo/img/slider3.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">3</div> </div> </li> <li> <img src="/demo/img/slider4.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">4</div> </div> </li> <li> <img src="/demo/img/slider5.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">5</div> </div> </li> <li> <img src="/demo/img/slider1.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">6</div> </div> </li> <li> <img src="/demo/img/slider2.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">7</div> </div> </li> <li> <img src="/demo/img/slider3.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">8</div> </div> </li> <li> <img src="/demo/img/slider4.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">9</div> </div> </li> <li> <img src="/demo/img/slider5.jpg" 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" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">1</div> </div> </li> <li> <img src="/demo/img/slider2.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">2</div> </div> </li> <li> <img src="/demo/img/slider3.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">3</div> </div> </li> <li> <img src="/demo/img/slider4.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">4</div> </div> </li> <li> <img src="/demo/img/slider5.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">5</div> </div> </li> <li> <img src="/demo/img/slider1.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">6</div> </div> </li> <li> <img src="/demo/img/slider2.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">7</div> </div> </li> <li> <img src="/demo/img/slider3.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">8</div> </div> </li> <li> <img src="/demo/img/slider4.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">9</div> </div> </li> <li> <img src="/demo/img/slider5.jpg" 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="" 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> <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> <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> <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> <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> <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-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
из компонента Инверсия или используйте Оверлей, чтобы добавить любой стиль с полем оверлея.
-
-
<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" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">1</div> </div> </li> <li> <img src="/demo/img/slider2.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">2</div> </div> </li> <li> <img src="/demo/img/slider3.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">3</div> </div> </li> <li> <img src="/demo/img/slider4.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">4</div> </div> </li> <li> <img src="/demo/img/slider5.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">5</div> </div> </li> <li> <img src="/demo/img/slider1.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">6</div> </div> </li> <li> <img src="/demo/img/slider2.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">7</div> </div> </li> <li> <img src="/demo/img/slider3.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">8</div> </div> </li> <li> <img src="/demo/img/slider4.jpg" alt=""> <div class="uk-position-center uk-panel"> <div class="uk-h1">9</div> </div> </li> <li> <img src="/demo/img/slider5.jpg" 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="" 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" alt=""> <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" alt=""> <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" alt=""> <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" alt=""> <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" alt=""> <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="" 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" alt=""> <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" alt=""> <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" alt=""> <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" alt=""> <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" alt=""> <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="" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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>
Опции компонента
При использовании компонента 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();
Останавливает автозапуск слайдера.