滑块

创建项目列表以用作响应式轮播滑块

滑块是对元素进行响应式展示的组件，可以使用鼠标或触摸手势进行滚动浏览。

用法

要应用滑动组件，请将 data-uk-slider 属性添加到 .uk-slider-container 元素周围的容器元素。添加一个项目列表，并将 .uk-slider 类分配给该列表。使用 .uk-width-* 和 .uk-grid-width-* 类来确定一次可见的元素数量。

示例

标记

<div data-uk-slider>

    <div class="uk-slider-container">
        <ul class="uk-slider uk-grid-width-medium-1-4">
            <li>...</li>
            ...
        </ul>
    </div>

</div>

导航

滑块本身可以通过鼠标的点击和拖动或在触摸设备上滑动来滚动。最好也添加一个可点击的滑块导航。滑块导航会添加在鼠标悬停在滑块上时出现的箭头按钮。

示例

<div class="uk-slidenav-position" data-uk-slider>

    <div class="uk-slider-container">
        <ul class="uk-slider uk-grid-width-medium-1-4">
            <li>...</li>
            ...
        </ul>
    </div>

    <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slider-item="previous"></a>
    <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slider-item="next"></a>

</div>

居中模式

默认情况下，滑块的元素始终与滑块容器的左边缘对齐。如果要改为使元素居中，请将 center 属性设置为 true。

注意 居中列表元素始终添加 .uk-active 类。如果需要高亮显示居中元素，可以使用它。

示例

标记

<div data-uk-slider="{center:true}">

    <div class="uk-slider-container">
        <ul class="uk-slider uk-grid-width-medium-1-4">
            <li>...</li>
            ...
        </ul>
    </div>


</div>

禁用无限滚动

默认情况下，滑块会循环遍历所有项目。要禁用此行为，请将 infinite 参数设置为 false。这在启用和禁用居中模式下都有效。

示例

标记

<div data-uk-slider="{infinite: false}">

    <div class="uk-slider-container">
        <ul class="uk-slider uk-grid-width-medium-1-4">
            <li>...</li>
            ...
        </ul>
    </div>

</div>

项目间隔

如果希望元素之间有一些间距，请将 .uk-grid 类添加到滑块容器。然后，元素将根据网格间隔进行间隔。

注意 你可以使用修饰符 uk-grid-medium 和 uk-grid-small 来更改间距。

示例

项目宽度

要设置元素的宽度，请使用 UIkit 网格中的宽度类。可以使用滑块容器上的 uk-grid-width-* 类，也可以使用每个列表项的单独宽度，即使用 uk-width-* 类。

示例：单独宽度

标记

<div data-uk-slider>

    <div class="uk-slider-container">
        <ul class="uk-slider">
            <li class="uk-width-1-3">...</li>
            <li class="uk-width-1-5">...</li>
            <li class="uk-width-2-5">...</li>
            ...
        </ul>
    </div>

</div>

响应式行为

为了适应不同的视口，可以使用响应式网格类。在以下示例中，滑块在大视口上显示四个项目，在中视口上显示三个项目，在小视口上只显示一个项目。

示例：响应式宽度

标记

<div data-uk-slider>

    <div class="uk-slider-container">
        <ul class="uk-slider uk-grid-width-medium-1-3 uk-grid-width-large-1-4">
            <li>...</li>
            ...
        </ul>
    </div>

</div>

全屏模式

滑块包括全屏模式，其中每个幻灯片都会拉伸到视口高度的 100%。

标记

<div data-uk-slider>

    <div class="uk-slider-container">
        <ul class="uk-slider uk-slider-fullscreen">
            <li>...</li>
            ...
        </ul>
    </div>

</div>

JavaScript 选项

手动初始化元素

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

事件