这篇文章主要介绍了Element Carousel 走马灯的具体实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
本文来源于Element官方文档：
http://element-cn.eleme.io/#/zh-CN/component/carousel
基础用法
普通走马灯
<div class="block"> <span class="demonstration">默认 Hover 指示器<p style="color:transparent">本文来源gao!daima.com搞$代!码网</p>触发</span> <h3>{{ item }}</h3></div><div class="block"> <span class="demonstration">Click 指示器触发</span> <h3>{{ item }}</h3></div>
组件― 走马灯
基础用法
<div class="block"> <span class="demonstration">默认 Hover 指示器触发</span> <h3 class="small">{{ item }}</h3></div><div class="block"> <span class="demonstration">Click 指示器触发</span> <h3 class="small">{{ item }}</h3></div> .el-carousel__item h3 { color: #475669; font-size: 14px; opacity: 0.75; line-height: 150px; margin: 0; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; }
指示器
<div class="block"> <span class="demonstration">默认 Hover 指示器触发</span> <h3 class="small">{{ item }}</h3></div><div class="block"> <span class="demonstration">Click 指示器触发</span> <h3 class="small">{{ item }}</h3></div> .el-carousel__item h3 { color: #475669; font-size: 14px; opacity: 0.75; line-height: 150px; margin: 0; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; }
切换箭头
<div class="block"> <span class="demonstration">默认 Hover 指示器触发</span> <h3 class="small">{{ item }}</h3></div><div class="block"> <span class="demonstration">Click 指示器触发</span> <h3 class="small">{{ item }}</h3></div> .el-carousel__item h3 { color: #475669; font-size: 14px; opacity: 0.75; line-height: 150px; margin: 0; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; }
卡片化
<h3 class="medium">{{ item }}</h3> .el-carousel__item h3 { color: #475669; font-size: 14px; opacity: 0.75; line-height: 200px; margin: 0; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; }
方向
<h3 class="medium">{{ item }}</h3> .el-carousel__item h3 { color: #475669; font-size: 14px; opacity: 0.75; line-height: 200px; margin: 0; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; }
Carousel Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| height | 走马灯的高度 | string | ― | ― |
| initial-index | 初始状态激活的幻灯片的索引，从 0 开始 | number | ― | 0 |
| trigger | 指示器的触发方式 | string | click | ― |
| autoplay | 是否自动切换 | boolean | ― | true |
| interval | 自动切换的时间间隔，单位为毫秒 | number | ― | 3000 |
| indicator-position | 指示器的位置 | string | outside/none | ― |
| arrow | 切换箭头的显示时机 | string | always/hover/never | hover |
| type | 走马灯的类型 | string | card | ― |
Carousel Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 幻灯片切换时触发 | 目前激活的幻灯片的索引，原幻灯片的索引 |
Carousel Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| setActiveItem | 手动切换幻灯片 | 需要切换的幻灯片的索引，从 0 开始；或相应 el-carousel-item 的 name 属性值 |
| prev | 切换至上一张幻灯片 | ― |
| next | 切换至下一张幻灯片 | ― |
Carousel-Item Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| name | 幻灯片的名字，可用作 setActiveItem 的参数 | string | ― | ― |
| label | 该幻灯片所对应指示器的文本 | string | ― | ― |
以上就是Element Carousel 走马灯的具体实现的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Element Carousel 走马灯的具体实现
转载请注明原文链接：Element Carousel 走马灯的具体实现
