JavaScript
搜索
分类

Element Carousel 走马灯的具体实现

作者：究极死胖兽 时间：2024-05-05 09:24:48　

本文来源于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>

组件— 走马灯

基础用法

Element Carousel 走马灯的具体实现


<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;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>

指示器

Element Carousel 走马灯的具体实现


<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;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>

切换箭头

Element Carousel 走马灯的具体实现


<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;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>

卡片化

Element Carousel 走马灯的具体实现


<template>
<el-carousel :interval="4000" type="card" height="200px">
 <el-carousel-item v-for="item in 6" :key="item">
  <h3 class="medium">{{ item }}</h3>
 </el-carousel-item>
</el-carousel>
</template>

<style>
.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;
}
</style>

方向

Element Carousel 走马灯的具体实现


<template>
<el-carousel height="200px" direction="vertical" :autoplay="false">
 <el-carousel-item v-for="item in 3" :key="item">
  <h3 class="medium">{{ item }}</h3>
 </el-carousel-item>
</el-carousel>
</template>

<style>
.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;
}
</style>

Carousel Attributes

参数说明类型可选值默认值
height走马灯的高度string——
initial-index初始状态激活的幻灯片的索引，从 0 开始number—0
trigger指示器的触发方式stringclick—
autoplay是否自动切换boolean—true
interval自动切换的时间间隔，单位为毫秒number—3000
indicator-position指示器的位置stringoutside/none—
arrow切换箭头的显示时机stringalways/hover/neverhover
type走马灯的类型stringcard—

Carousel Events

事件名称说明回调参数
change幻灯片切换时触发目前激活的幻灯片的索引，原幻灯片的索引

Carousel Methods

方法名说明参数
setActiveItem手动切换幻灯片需要切换的幻灯片的索引，从 0 开始；或相应 el-carousel-item 的 name 属性值
prev切换至上一张幻灯片—
next切换至下一张幻灯片—

Carousel-Item Attributes

参数说明类型可选值默认值
name幻灯片的名字，可用作 setActiveItem 的参数string——
label该幻灯片所对应指示器的文本string——

来源：https://blog.csdn.net/sps900608/article/details/79463695

标签：Element,Carousel,走马灯
0
投稿

猜你喜欢

  • MySQL中登录与退出超全图文讲解

    2024-01-19 20:24:43

  • 在双python下设置python3为默认的方法

    2022-03-02 10:31:39

  • 上传图片js判断图片尺寸和格式兼容IE

    2024-04-10 10:48:37

  • Python:slice与indices的用法

    2021-09-10 22:31:09

  • Python base64和hashlib模块及用法详解

    2022-09-27 14:36:17

  • linux安装Python3.4.2的操作方法

    2022-06-17 19:19:15

  • php版微信公众账号第三方管理工具开发简明教程

    2024-04-30 08:47:46

  • python tqdm用法及实例详解

    2023-11-03 01:54:53

  • Python实现的生成自我描述脚本分享(很有意思的程序)

    2023-08-14 20:21:06

  • HTML和SEO基础知识：H标签全透视

    2010-09-21 16:45:00

  • python退出循环的方法

    2022-06-10 07:24:35

  • 使用OpenCV对运动员的姿势进行检测功能实现

    2022-06-08 03:23:14

  • python中defaultdict的用法详解

    2021-05-02 11:11:07

  • 重新认识CSS的权重

    2011-05-24 17:06:00

  • Python调用C语言的实现

    2021-10-15 11:48:53

  • python正则表达式中匹配次数与贪心问题详解(+ ？*)

    2021-04-24 20:52:04

  • python 连续不等式语法糖实例

    2021-11-03 02:15:20

  • python 把文件中的每一行以数组的元素放入数组中的方法

    2023-04-15 23:14:37

  • Python如何利用opencv实现手势识别

    2023-09-02 21:55:13

  • Python中的复制操作及copy模块中的浅拷贝与深拷贝方法

    2023-08-18 14:38:24
    • asp之家 网络编程 m.aspxhome.com