滚动条/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 选项
选项 | 可用值 | 默认值 | 描述 |
---|---|---|---|
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 | 条目获得焦点时触发 |