# 滚动条/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 | 条目获得焦点时触发 |