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: 4}">
<ul class="uk-grid uk-slideset">
<li>...</li>
<li>...</li>
</ul>
<a href=""data-uk-slideset-item="previous"></a>
<a href=""data-uk-slideset-item="next"></a>
</div>
Slidenav и Dotnav
Вы можете использовать любые другие UIkit компоненты для перемещения по Slideset. Например Slidenav и Dotnav может быть использован для применения стиля к slideset навигаций как вы можете увидеть ниже.
Пример
Разметки
<div data-uk-slideset="{default: 4}">
<div class="uk-slidenav-position">
<ul class="uk-grid uk-slideset">
<li>...</li>
<li>...</li>
</ul>
<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>
<ul class="uk-slideset-nav uk-dotnav uk-flex-center">...</ul>
</div>
Адаптивный пункты
В slideset поддерживает носитель на основе запроса видимость элементов. Просто добавьте точку останова опция, как small
, medium
, large
к data-uk-slideset
атрибут. Добавить количество предметов, которые вы хотите отобразить от останова вверх.
Пример
Разметки
<div data-uk-slideset="{small: 2, medium: 4, large: 6}">...</div>
Анимации
Есть партия анимации, которые могут использоваться, чтобы отобразить следующий набор элементов. Просто добавить animation
параметр data-uk-slideset
и задать нужную анимацию. Анимация Длительность также может быть скорректирована при помощи duration
опция.
Анимация | Описание |
---|---|
fade |
Предметы исчезают и появляются. |
scale |
Элементы шкалы вверх и вниз. |
slide-horizontal |
Предметы сдвиньте в сторону. |
slide-vertical |
Элементы скольжения вертикально. |
slide-top |
Элементы скольжения с вершины. |
slide-bottom |
Элементы слайда и снизу. |
Пример
Разметки
<div data-uk-slideset="{animation: 'scale', duration: 200}">...</div>
Фильтр
Вы можете также отфильтровать slideset так, что только определенные элементы будет отображаться. Чтобы сделать это, добавьте data-uk-filter
атрибут для каждого элемента управления, чтобы определить категории, которые вы хотите фильтровать. Затем вам также потребуется добавить data-uk-filter
атрибут для каждого элемента slideset, чтобы определить к какой категории товар относится.
Примечание элементы управления могут быть включены в slideset или ссылки путем добавления controls
параметр data-uk-slideset
атрибут и передавая идентификатор параметра.
Пример
Разметки
<!-- The controls are included in the 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=""></li>
<li data-uk-filter="filter-b"><img src=""></li>
</ul>
</div>
<!-- The controls are outside the 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=""></li>
<li data-uk-filter="filter-b"><img src=""></li>
</ul>
</div>
JavaScript варианты
Вариант | Возможное значение | По умолчанию | Описание |
---|---|---|---|
default |
integer | 1 | По умолчанию видимых элементов в множестве |
small |
integer | null | Видимые элементы в наборе в маленьких останова |
medium |
integer | null | Видимых элементов в множестве в средней точке останова |
large |
integer | null | Видимые элементы в наборе в большой останова |
xlarge |
integer | null | Видимые элементы в набор на экстренный останова |
animation |
string | 'fade' | Имя анимации |
duration |
integer | 200 | Длительность анимации (в мс) |
delay |
integer | 100 | Анимация задержка между элементами в наборе |
filter |
string | '' | Элементы фильтра |
autoplay |
boolean | false | Определяет ли элементы slideset должны автоматически переключаться. |
pauseOnHover |
boolean | true | Пауза автозапуск при наведении на slideset. |
autoplayInterval |
integer | 7000 | Определяет временной интервал между включением элементов slideset. |
Инициализации элементов вручную
var slideset = UIkit.slideset(element, { /* options */ });
События
Название | Параметр | Описание |
---|---|---|
show.uk.slideset |
event, set | На съемках шоу |