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 опция.

Пример

Разметки

<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 варианты

Инициализации элементов вручную

var slideset = UIkit.slideset(element, { /* options */ });

События