滚动条/Slider

创建一个可以作为响应式旋转木马滚动条的条目列表。

滚动条能响应式地显示元素，可以通过鼠标和触摸手势滚动。

用法

要使用滚动条组件，需要为包含 .uk-slider-container 元素的容器元素添加 data-uk-slider 属性。添加条目的列表，并为此列表添加 .uk-slider 类。使用 .uk-width-* 和 .uk-grid-width-* 类以确定每次显示多少个元素。

注意 使用此组件需要额外添加 slider.css 文件，在css/components文件夹中。此组件需要额外添加 slider.js 文件，在js/components文件夹中。

Example

Markup

<div data-uk-slider>

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

</div>

导航/Navigation

滚动条本身可以使用鼠标点击和拖拽或者触屏设备中滑动进行滚动。添加一个可以点击的滑动导航也是个好主意。滑动导航添加的箭头按钮会在鼠标悬停在滑动条上时显示出来。

Example

<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 Mode

默认情况下，滚动条的元素总是对齐滚动条容易的左边缘。如果你想让元素居中，设置 center 属性的值为 true 即可。

注意 被居中的列表元素通常会被添加 .uk-active 类。如果你想高亮显示居中的元素，添加该类名即可。

Example

Markup

<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 即可。在启用或禁用居中模式中都同样有效。

Example

Markup

<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>

条目排水沟/Item gutter

如果你想为滚动条中的元素添加间距，添加 .uk-grid 类到滚动条容器即可。元素将会根据网格排水沟尺寸被分隔开。

注意 你可以使用网格的修饰类 uk-grid-medium 和 uk-grid-small 来调整排水沟的尺寸。

Example

条目宽度/Item width

如果要设置滚动条中各元素的宽度，使用 UIkit 网格中的宽度类即可。既可以在滚动条容器上使用 uk-grid-width-* 类名，也可以为列表中每个条目单独使用 uk-width-* 类名。

Example: 为条目单独设置宽度

Markup

<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>

响应式行为

为了适应不同的视口，你可以使用网格的响应式类名。在下面的例子中，滚动条会在大视口中显示4个条目，在中视口中显示3个，在小视口中显示一个。

Example: 响应式宽度

Markup

<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%的视口高度。

Markup

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

事件/Events