滚动条/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>

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

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-mediumuk-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 选项

选项 可用值 默认值 描述
center boolean false 条目居中模式
threshold boolean true 移动鼠标触发元素拖动的阈值,以像素为单位。
infinite boolean true 无限滚动
activecls string uk-active 在居中模式中,添加到被选中条目上的类名。
autoplay false boolean 是否让滚动条的内容条目自动切换
pauseOnHover boolean true 鼠标悬停在滚动条上时暂停播放
autoplayInterval integer 7000 切换滚动条内容条目的时间间隔

手动初始化元素

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

事件/Events

事件名 Parameter 描述
focus.uikit.slider event, index, item 条目获得焦点时触发