- 开始使用
- 功能组件
- 附加组件
- 教程
- 如何定制
- 布局示例
- 项目结构
- 使用 Less & Sass
- 创建主题
- 创建样式
- Customizer.json 变量
- JavaScript 示例
- 自定义前缀
- 基础
- 打印组件
- 网格组件
- 面板
- 块
- 文章
- 评论
- 效果
- Flex 布局
- 覆盖
- 导航菜单
- 导航栏
- 二级导航
- 面包屑
- 分页
- 选项卡
- 缩略图导航
- 列表
- 描述列表
- 表格组件
- 表单
- 按钮组件
- 图标
- 关闭
- 徽章
- 提示框组件
- 缩略图
- 遮罩
- 文本
- 列
- 动画组件
- 对比度
- 下拉菜单
- 模态对话框
- 抽屉
- 切换器
- 拨动组件
- 滚动监听
- 平滑滚动
- 动态网格
- 视差网格
- 圆点导航
- 滑动导航
- 动态分页
- 高级表单
- 文件表单
- 密码表单
- 选择表单
- 占位符
- 进度条
- 灯箱
- 自动完成
- 日期选择器
- HTML 编辑器
- 滚动条
- 滑块集
- 幻灯片
- 视差
- 手风琴
- 通知
- 搜索
- 可嵌套
- 可排序
- 附着
- 时间选择器
- 工具提示
- 上传
滚动条
创建一个可以作为响应式旋转木马滚动条的条目列表。
滚动条能响应式地显示元素,可以通过鼠标和触摸手势滚动。
用法
要使用滚动条组件,需要为包含 .uk-slider-container
元素的容器元素添加 data-uk-slider
属性。添加条目的列表,并为此列表添加 .uk-slider
类。使用 .uk-width-*
和 .uk-grid-width-*
类以确定每次显示多少个元素。
注意 使用此组件需要额外添加 slider.css
文件,在css/components
文件夹中。此组件需要额外添加 slider.js
文件,在js/components
文件夹中。
<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
滚动条本身可以使用鼠标点击和拖拽或者触屏设备中滑动进行滚动。添加一个可以点击的滑动导航也是个好主意。滑动导航添加的箭头按钮会在鼠标悬停在滑动条上时显示出来。
<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
类。如果你想高亮显示居中的元素,添加该类名即可。
<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>
条目排水沟/Item gutter
如果你想为滚动条中的元素添加间距,添加 .uk-grid
类到滚动条容器即可。元素将会根据网格排水沟尺寸被分隔开。
注意 你可以使用网格的修饰类 uk-grid-medium
和 uk-grid-small
来调整排水沟的尺寸。
条目宽度/Item width
如果要设置滚动条中各元素的宽度,使用 UIkit 网格中的宽度类即可。既可以在滚动条容器上使用 uk-grid-width-*
类名,也可以为列表中每个条目单独使用 uk-width-*
类名。
Example: 为条目单独设置宽度
<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个,在小视口中显示一个。
<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 选项
选项 | 可用值 | 默认值 | 描述 |
---|---|---|---|
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 | 条目获得焦点时触发 |
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论