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>

滑动导航和圆点导航

你可以使用任何其他 UIkit 组件来导航浏览 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>

响应式项目

幻灯片集支持基于媒体查询的项目可见性。只需将断点选项（如 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>

筛选器

你还可以筛选幻灯片集，以便只显示特定项目。 为此，请将 data-uk-filter 属性添加到每个控件，以定义要筛选的类别。 然后，还需要将 data-uk-filter 属性添加到每个幻灯片集项目，以定义项目所属的类别。

注意控件可以包含在幻灯片集中，也可以通过将 controls 选项添加到 data-uk-slideset 属性并将 ID 传递给该选项来引用。

示例

标记

<!-- 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 */ });

事件