elementUI 轮播图 ----Carousel 走马灯笔记

在有限空间内,循环播放同一类型的图片、文字等内容

用法:

<el-carousel :interval="5000" arrow="always"><el-carousel-item v-for="item in 4" :key="item"><h3>{{ item }}</h3></el-carousel-item></el-carousel>

定义高度:使用属性 hight(ex:使得轮播图高度自适应父级元素)

//定义变量
carouselHight:''
//添加监听 其中parentdom为父级元素idwindow.addEventListener("resize", ()=>{this.carouselHight = document.getElementById('parentdom') .offsetHeight;this.$message.error( String(this.carouselHight))
});

CSS 样式

//定义每张卡片的样式
.el-carousel__item *{background-color:  rgba(0,0,0,0) !important;
}//  /* 左右箭头宽高 */
.el-carousel__arrow{height: 50px;width: 50px
}
/* 鼠标划过样式透明 */
.el-carousel__arrow:hover {background-color: rgba(0,0,0,0);
}
//切换左右箭头样式
.el-carousel__arrow--left {color: transparent;/* 设置背景图片 */background: url("../assets/SecurityScreenCarouselLeft.png") no-repeat center center;background-size: 80px;
}
.el-carousel__arrow--right {color: transparent;/* 设置背景图片 */background: url("../assets/SecurityScreenCarouselRight.png") no-repeat center center;background-size: 80px;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/130182.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

洗地机哪个品牌好?家用洗地机选购攻略

随着家用洗地机的普及和市场的广泛认可&#xff0c;进入洗地机行业的制造商也越来越多。在面对众多洗地机品牌时&#xff0c;消费者常常感到困惑&#xff0c;不知道如何选择。面对众多选择&#xff0c;选择有良好保障的知名洗地机品牌是明智之举。知名品牌在质量、售后服务等方…

扩容一个新节点

1.删除nodes rm -rf nodes/ 2.挂载本地文件与创建节点 bash build_chain.sh -f ipconf -e /root/tools/fisco-bcos 3.部署节点 bash nodes/127.0.0.1/start_all.sh 4.把共享的gen_node_cert.sh文件下载到本地 cp /root/Desktop/共享文件夹/tools/gen_node_cert.sh ./…

java毕业设计基于springboot+vue的村委会管理系统

项目介绍 采用JAVA语言&#xff0c;结合SpringBoot框架与Vue框架以及MYSQL数据库设计并实现的。本村委会管理系统主要包括个人中心、村民管理、村委会管理、村民信息管理、土地变更管理、农业补贴管理、党员信息管理等多个模块。它帮助村委会管理实现了信息化、网络化&#xf…

初学Flutter:swiper实现

效果展示&#xff1a; flutter swiper 1、安装 card_swiper 2、引入card_swiper import package:card_swiper/card_swiper.dart;3、使用 这里我主要是对官网例子进行实践&#xff0c;主要是5种常用的swiper 1、普遍的swiper //custom swiper class CustomSwiper extends S…

P1037 [NOIP2002 普及组] 产生数

Portal. 注意到数与数之间的转换关系是连续的&#xff0c;即若有 i → j , j → k i\rightarrow j,j\rightarrow k i→j,j→k&#xff0c;就有 i → k i\rightarrow k i→k。 发现和传递闭包很像&#xff0c;可以用 Floyd 算法解决。 由于数据范围 n < 1 0 30 n<10…

css 图片好玩的一个属性,添加滤镜

鼠标经过效果对比&#xff1a; 上图是改变了图片的饱和度&#xff0c;代码如下&#xff1a; .img-box .v-image:hover {filter: saturate(1.75); }其他滤镜说明如下图&#xff1a;

R语言爬虫代码模版:技术原理与实践应用

目录 一、爬虫技术原理 二、R语言爬虫代码模板 三、实践应用与拓展 四、注意事项 总结 随着互联网的发展&#xff0c;网络爬虫已经成为获取网络数据的重要手段。R语言作为一门强大的数据分析工具&#xff0c;结合爬虫技术&#xff0c;可以让我们轻松地获取并分析网络数据。…

PaddleMIX学习笔记(1)

写在前面 之前对HyperLedger的阅读没有完全结束&#xff0c;和很多朋友一样&#xff0c;同时也因为工作的需要&#xff0c;最近开始转向LLM方向。 国内在大模型方面生态做的最好的&#xff0c;目前还是百度的PaddlePaddle&#xff0c;所以自己也就先从PP开始看起了。 众所周知…

office2024下载详细安装教程

简单的说 Office 是一款由Microsoft 开发的一套办公软件&#xff0c;里面包含了常用的办公组件而其中就包含了Word、Excel、PowerPoint、Access等&#xff01; 并且office是目前最常用的一类办公软件&#xff0c;使用它可以解决日常生活和工作中遇到的很多问题。 熟练掌握offi…

Java医院HIS系统源码

Java医院HIS系统源码 项目描述 该项目是用springbootlayuishiro写的医院管理系统&#xff0c;该系统的业务比较复杂&#xff0c;数据库一共有36张表。项目的视频业务参考文档&#xff0c;都在百度云盘中。可以先看看视频和参考文档。 运行环境 jdk8mysqlIntelliJ IDEAmaven…

shell script 的默认变量$0,$1,$2...,参数偏移的shift

简单来说&#xff0c;在scirpt脚本里面&#xff0c;$0表示文件名&#xff0c;$1表示第一个参数&#xff0c;以此类推&#xff0c;还有 $# 后面接参数的个数 $ 代表"$1","$2","$3"&#xff0c;每个都是独立的&#xff0c;用双引号括起来 $* 代…

register_parameter和register_buffer 详解

在参考yolo系列代码或其他开源代码&#xff0c;经常看到register_buffer和 register_parameter的使用&#xff0c;接下来将详细对他们进行介绍。 1. 前沿 在搭建网络时&#xff0c;我们 自定义的参数&#xff0c;往往不会保存到模型权重文件中&#xff0c;或者成为模型可学习…

ElasticSearch使用

Java API操作ES 相关依赖&#xff1a; <dependencies><!-- ES的高阶的客户端API --><dependency><groupId>org.elasticsearch.client</groupId><artifactId>elasticsearch-rest-high-level-client</artifactId><version>7.6…

软件测试之BUG篇(定义,创建,等级,生命周期)

目录 1. BUG 的定义 2. 如何创建 BUG 3. BUG 等级 4. BUG 生命周期 高频面试题&#xff1a; 1. BUG 的定义 当且仅当产品规格书存在且正确时&#xff0c;程序的实现和规格书的要求不匹配时&#xff0c;那就是软件错误。当产品规格说明书没有提到的功能时&#xff0c;以用户…

国家统计局教育部各级各类学历教育学生情况数据爬取

教育部数据爬取 1、数据来源2、爬取目标3、网页分析4、爬取与解析5、如何使用Excel打开CSV1、数据来源 国家统计局:http://www.stats.gov.cn/sj/ 教育部:http://www.moe.gov.cn/jyb_sjzl/ 数据来源:国家统计局教育部文献教育统计数据2021年全国基本情况(各级各类学历教育学…

编写shell脚本,利用mysqldump实现MySQL数据库分库分表备份

查看数据和数据表 mysql -uroot -p123456 -e show databases mysql -uroot -p123456 -e show tables from cb_d 删除头部Database和数据库自带的表 mysql -uroot -p123456 -e show databases -N | egrep -v "information_schema|mysql|performance_schema|sys"编写…

HTML和CSS的基础-前端扫盲

想要写出一个网页&#xff0c;就需要学习前端开发&#xff08;写网页代码&#xff09;和后端开发&#xff08;服务器代码&#xff09;。 对于前端的要求&#xff0c;我们不需要了解很深&#xff0c;仅仅需要做到扫盲的程度就可以了。 写前端&#xff0c;主要用到的有&#xf…

蓝鹏测控测宽仪系列又添一员大将——双目测宽仪

轧钢过程中钢板的宽度是一个重要的参数&#xff0c;它直接决定了成材率。同时&#xff0c;随着高新科技越来越广泛的应用到工程实际中&#xff0c;许多控制系统需要钢板实时宽度值作为模型参数。 当前&#xff0c;相当一部分宽厚板厂还在采用人工检测的方法&#xff0c;检测环境…

代码随想录算法训练营第23期day42|1049. 最后一块石头的重量II、494. 目标和、474.一和零

目录 一、&#xff08;leetcode 1049&#xff09;最后一块石头的重量II 二、&#xff08;leetcode 494&#xff09;目标和 三、&#xff08;leetcode 474&#xff09;一和零 一、&#xff08;leetcode 1049&#xff09;最后一块石头的重量II 力扣题目链接 状态&#xff1a;…

【漏洞复现】Drupal XSS漏洞复现

感谢互联网提供分享知识与智慧&#xff0c;在法治的社会里&#xff0c;请遵守有关法律法规 复现环境&#xff1a;Vulhub 环境启动后&#xff0c;访问 http://192.168.80.141:8080/ 将会看到drupal的安装页面&#xff0c;一路默认配置下一步安装。因为没有mysql环境&#xff0c;…