ElementCarousel走马灯的具体实现_element走马灯实现资源-CSDN文库

5星 · 超过95%的资源 45 浏览量 2020-12-28 16:50:43 上传评论收藏 56KB PDF 举报

资源推荐

资源详情

资源评论

Element Carousel 走马灯的具体实现走马灯的具体实现

本文来源于Element官方文档：

http://element-cn.eleme.io/#/zh-CN/component/carousel

基础用法基础用法

普通走马灯

<div class="block">

<span class="demonstration">默认 Hover 指示器触发</span>

<el-carousel height="150px">

<el-carousel-item v-for="item in 4" :key="item">

<h3>{{ item }}</h3>

</el-carousel-item>

</el-carousel>

</div>

<div class="block">

<span class="demonstration">Click 指示器触发</span>

<el-carousel trigger="click" height="150px">

<el-carousel-item v-for="item in 4" :key="item">

<h3>{{ item }}</h3>

</el-carousel-item>

</el-carousel>

</div>

组件组件— 走马灯走马灯

基础用法基础用法

<template>

<div class="block">

<span class="demonstration">默认 Hover 指示器触发</span>

<el-carousel height="150px">

<el-carousel-item v-for="item in 4" :key="item">

<h3 class="small">{{ item }}</h3>

</el-carousel-item>

</el-carousel>

</div>

<div class="block">

<span class="demonstration">Click 指示器触发</span>

<el-carousel trigger="click" height="150px">

<el-carousel-item v-for="item in 4" :key="item">

<h3 class="small">{{ item }}</h3>

</el-carousel-item>

</el-carousel>

</div>

</template>

<style>

.el-carousel__item h3 {

color: #475669;

font-size: 14px;

opacity: 0.75;

line-height: 150px;

margin: 0;

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

内容反馈

金山文档

2023-06-09

总之，我觉得这篇文档内容丰富，适合所有对于Element Carousel感兴趣的读者。
无能为力就要努力

2023-06-09

个人觉得，这篇文档可以给新手提供一个不错的入门指南。
经年哲思

2023-06-09

文档所提供的图片和代码示例非常有帮助，完全可以照着做一遍。
朱王勇

2023-06-09

文档结构清晰，排版整洁，阅读起来非常舒适。
刘璐璐璐璐璐

2023-06-09

对于Element Carousel这个知识点，这篇文档肯定是最全面的了。

前往

页

weixin_38538021

粉丝: 1
资源: 889

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip