Компонент Slideset
Создавайте наборы и группы элементов, позволяя "перебирать" комплекты.
Использование
Чтобы применить компонент «Slideset», добавьте атрибут data-uk-slideset к элементу контейнера. Добавьте параметр default к атрибуту data-uk-slideset, чтобы настроить количество отображаемых элементов в наборе.
Пример
Разметка
<div data-uk-slideset="{default: 4}">
<ul class="uk-grid uk-slideset">
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
...
</ul>
</div>Навигация
Для навигации по слайдам используйте класс uk-slideset-nav. Это будет динамически создавать навигацию в зависимости от количества существующих слайдов.
Разметка
<div data-uk-slideset="{default: 4}">
<ul class="uk-grid uk-slideset">
<li>...</li>
<li>...</li>
</ul>
<ul class="uk-slideset-nav">...</ul> <!-- Навигация по слайдам -->
</div>Чтобы переключиться на соседние слайды, используйте атрибут data-uk-slideset-item и установите для атрибута next и previous. Элементы с атрибутом data-uk-slideset-item должны находиться внутри контейнера data-uk-slideset.
Разметка
<div data-uk-slideset="{default: 3}"> <!-- Контейнер data-uk-slideset -->
<ul class="uk-grid uk-slideset"> <!-- Список элементов -->
<li>...</li>
<li>...</li>
</ul>
<ul class="uk-grid uk-grid-width-1-2 uk-text-center">
<li><a href="" data-uk-slideset-item="previous"></a></li> <!-- Предыдущий -->
<li><a href="" data-uk-slideset-item="next"></a></li> <!-- Следующий -->
</ul>
</div>Slidenav и Dotnav
Вы можете использовать любой из компонентов UIkit 2 для навигации по Slideset. Например, Slidenav и Dotnav можно использовать для стилизации навигации Slideset, как вы можете видеть ниже.
Пример
Разметка
<div data-uk-slideset="{default: 4}">
<div class="uk-slidenav-position"> <!-- Контейнер Slidenav, центрируем вертикально -->
<ul class="uk-grid uk-slideset">
<li>...</li>
<li>...</li>
</ul>
<!-- Slidenav -->
<a href="" class="uk-slidenav uk-slidenav-previous" data-uk-slideset-item="previous"></a>
<a href="" class="uk-slidenav uk-slidenav-next" data-uk-slideset-item="next"></a>
</div>
<!-- Dotnav -->
<ul class="uk-slideset-nav uk-dotnav uk-flex-center">...</ul>
</div>Адаптивные элементы
Компонент «Slideset» поддерживает media query видимости элементов. Просто добавьте вариант точки останова *breakpoint, такой как small, medium, large, xlarge к атрибуту data-uk-slideset. Добавьте количество элементов, которые вы хотите отобразить, в указанной точке останова.
| Вариант | Описание |
|---|---|
small |
Влияет на ширину устройства от 480px и выше. |
medium |
Влияет на ширину устройства от 768px и выше. |
large |
Влияет на ширину устройства от 960px и выше. |
xlarge |
Влияет на ширину устройства от 1220px и выше. |
Пример
Разметка
<div data-uk-slideset="{small: 2, medium: 4, large: 5, xlarge: 3}">
...
</div>Анимация
Существует множество анимаций, которые можно использовать для отображения следующего набора элементов. Просто добавьте параметр animation в data-uk-slideset и установите для него нужную анимацию. Продолжительность анимации также можно настроить с помощью опции duration.
| Анимация | Описание |
|---|---|
fade |
Эффект плавного появления/исчезновения. |
scale |
Анимация элемента - эффект «scale». |
slide-horizontal |
Элементы сдвигаются горизонтально. |
slide-vertical |
Элементы сдвигаются вертикально. |
slide-top |
Элементы скользят вверх с опусканием вниз. |
slide-bottom |
Элементы скользят вниз и поднимаются. |
Пример
Разметка
<div data-uk-slideset="{animation: 'scale', duration: 200}">...</div>Фильтр
Вы также можете отфильтровать набор слайдов, чтобы отображались только определенные элементы. Для этого добавьте атрибут data-uk-filter к каждому элементу управления, чтобы определить категорию, которую вы хотите фильтровать. Затем вам также необходимо добавить атрибут data-uk-filter к каждому элементу slideset, чтобы определить, к какой категории относится этот элемент.
Примечание Элементы управления можно включить в slideset или ссылаться на них, добавив параметр controls в атрибут data-uk-slideset и передав идентификатор в параметр.
Пример
Разметка
<!-- Controls / Элементы управления включены в Slideset -->
<div data-uk-slideset>
<ul>
<li data-uk-filter=""><a></a></li>
<li data-uk-filter="filter-a"><a></a></li>
<li data-uk-filter="filter-b"><a></a></li>
</ul>
<ul class="uk-grid uk-slideset">
<li data-uk-filter="filter-a"><img src="" alt=""></li>
<li data-uk-filter="filter-b"><img src="" alt=""></li>
</ul>
</div>
<!-- Controls / Элементы управления находятся за пределами Slideset -->
<ul id="my-id">
<li data-uk-filter=""><a></a></li>
<li data-uk-filter="filter-a"><a></a></li>
<li data-uk-filter="filter-b"><a></a></li>
</ul>
<div data-uk-slideset"{controls: '#my-id'}">
<ul class="uk-slideset">
<li data-uk-filter="filter-a"><img src="" alt=""></li>
<li data-uk-filter="filter-b"><img src="" alt=""></li>
</ul>
</div>JavaScript options
| Option | Possible value | Default | Описание |
|---|---|---|---|
default |
integer | 1 | Видимые по умолчанию элементы в комплекте |
small |
integer | null | Видимые с шириной устройства от 480px и выше. (small breakpoint) |
medium |
integer | null | Видимые с шириной устройства от 768px и выше. (medium breakpoint) |
large |
integer | null | Видимые с шириной устройства от 960px и выше. (large breakpoint) |
xlarge |
integer | null | Видимые с шириной устройства от 1220px и выше. (xlarge breakpoint) |
animation |
string | 'fade' | Название анимации |
duration |
integer | 200 | Продолжительность анимации в мс |
delay |
integer | 100 | Задержка анимации между элементами в комплекте |
filter |
string | '' | Фильтр элементов |
autoplay |
boolean | false | Определяет, должны ли элементы slideset переключаться автоматически. |
pauseOnHover |
boolean | true | Приостановка автозапуска при наведении на slideset. |
autoplayInterval |
integer | 7000 | Определяет промежуток времени между переключением элементов slideset. |
Init element manually
var slideset = UIkit.slideset(element, { /* options */ });Events
| Name | Parameter | Description |
|---|---|---|
show.uk.slideset |
event, set | On set show |