vue+elementui Carousel 走马灯 以四宫格的布局方式一次轮播4张图片

本文主要是介绍vue+elementui Carousel 走马灯 以四宫格的布局方式一次轮播4张图片,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

效果

 以四宫格的布局方式一次轮播4张图片

vue

<el-carousel :loop="false" :autoplay="false" height="700px" width='500px' ref="remarkCarusel"  indicator-position="outside" @change="sildeImg"><el-carousel-item class="el-car-item" v-for="(list, index) in dataList" :key="index"><div v-for="(item, index1) in items" :key="index1" :class="item.class"><img v-for="(imgList,index2) in list" v-if="index1 == index2" :key="index2" :src="imgList.url" :alt="imgList.title"  style="height: 100%;width: 100%;margin-right: 20px;"/> <div v-show="total>0"style="right: 10%; top: 10%; color: #000; position: absolute; z-index: 100; height: 25px; background-color: rgba(255, 255, 255, 0.5);"><table style="background: none"><tr><th id="pictureLabel" class="myclass" v-if="list[index1] != null">&nbsp;&nbsp;标题:{{list[index1].title}}</th></tr></table></div><div v-show="total>0"style="right: 1%; top: 1%; color: #000; position: absolute; z-index: 100; height: 25px;"><el-button v-if="list[index1] != null" size="mini" round @click="handleEdit(list[index1])">编辑</el-button></div></div></el-carousel-item></el-carousel>

js

data() {return{items: [  { content: 'Div 1', class: 'class1' },  { content: 'Div 2', class: 'class2' },  { content: 'Div 3', class: 'class3' }, { content: 'Div 4', class: 'class4' },  ] ,dataList: [{"title": "标题1","url": "https://img2.baidu.com/it/u=1415816293,2911087723&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=338"},{"title": "标题2","url": "https://img.mp.itc.cn/upload/20170612/72d37f9f668549839d8cdb5d787f7ec3_th.jpg"},{"title": "标题3","url": "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2022%2F0509%2F0a525bbaj00rblcqi003lc000p000iwm.jpg&thumbnail=660x2147483647&quality=80&type=jpg"},{"title": "标题4","url": "https://img2.baidu.com/it/u=4213943477,3171054669&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=588"},{"title": "标题5","url": "https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"},{"title": "标题6","url": "https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"},],}},

处理后端返回的数据

getDataSource() {let newDataList = []let current = 0if(this.dataList && this.dataList.length>0){for(let i=0;i<=this.dataList.length-1;i++){if(i%4 !== 0 || i === 0 ){if(!newDataList[current]){newDataList.push([this.dataList[i]])}else{newDataList[current].push(this.dataList[i])}}else{current++newDataList.push([this.dataList[i]])}}}this.dataList = [...newDataList]this.$refs.remarkCarusel.setActiveItem(0);},

css


.class1 {  position: absolute; top: 0px; left: 100px;height: 350px;width: 815px; 
}  
.class2 {  position: absolute; top: 0px; left: 930px;height: 350px;width: 815px;  
}  
.class3 {  position: absolute; top: 360px; left: 100px;height: 350px;width: 815px; 
} 
.class4 {  position: absolute; top: 360px; left: 930px;height: 350px;width: 815px; 
} 
.myclass{background: none; border: none; text-align: left; cursor: default
}
.el-carousel__item{z-index: -1;
}.el-carousel__item.is-active{z-index: 2;
}/* Carousel 走马灯 指示器样式 将指示器的显示位置设置在容器外部:indicator-position属性定义了指示器的位置。设置为outside则会显示在外部。
*/
::v-deep .el-carousel__indicators {left: unset;transform: unset;right: 46%;bottom: 1%;
}
::v-deep .el-carousel__button {width: 10px;height: 10px;border: none;border-radius: 50%;background-color: rgba(0, 0, 0, 0.2);
}
::v-deep .is-active .el-carousel__button {background: #3f8ec8;
}::v-deep .el-carousel__container {height: 100%;
}

参考

vue+element-ui carousel走马灯一次轮播(显示)指定张数图片
vue+elementui Carousel 走马灯 一次轮播4张图片
Vue + element 点击事件 修改走马灯的播放索引
Vue ElementUI el-carousel 走马灯 指示灯样式修改

出现闪烁问题解决

element ui 走马灯问题

这篇关于vue+elementui Carousel 走马灯 以四宫格的布局方式一次轮播4张图片的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/421334

相关文章

Java实现MD5加密的四种方式

《Java实现MD5加密的四种方式》MD5是一种广泛使用的哈希算法,其输出结果是一个128位的二进制数,通常以32位十六进制数的形式表示,MD5的底层实现涉及多个复杂的步骤和算法,本文给大家介绍了Ja... 目录MD5介绍Java 中实现 MD5 加密方式方法一:使用 MessageDigest方法二:使用

Linux配置IP地址的三种实现方式

《Linux配置IP地址的三种实现方式》:本文主要介绍Linux配置IP地址的三种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录环境RedHat9第一种安装 直接配置网卡文件第二种方式 nmcli(Networkmanager command-line

JAVA封装多线程实现的方式及原理

《JAVA封装多线程实现的方式及原理》:本文主要介绍Java中封装多线程的原理和常见方式,通过封装可以简化多线程的使用,提高安全性,并增强代码的可维护性和可扩展性,需要的朋友可以参考下... 目录前言一、封装的目标二、常见的封装方式及原理总结前言在 Java 中,封装多线程的原理主要围绕着将多线程相关的操

Golang中拼接字符串的6种方式性能对比

《Golang中拼接字符串的6种方式性能对比》golang的string类型是不可修改的,对于拼接字符串来说,本质上还是创建一个新的对象将数据放进去,主要有6种拼接方式,下面小编就来为大家详细讲讲吧... 目录拼接方式介绍性能对比测试代码测试结果源码分析golang的string类型是不可修改的,对于拼接字

Linux下修改hostname的三种实现方式

《Linux下修改hostname的三种实现方式》:本文主要介绍Linux下修改hostname的三种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下修改ho编程stname三种方式方法1:修改配置文件方法2:hFvEWEostnamectl命

Java实现数据库图片上传功能详解

《Java实现数据库图片上传功能详解》这篇文章主要为大家详细介绍了如何使用Java实现数据库图片上传功能,包含从数据库拿图片传递前端渲染,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、前言2、数据库搭建&nbsChina编程p; 3、后端实现将图片存储进数据库4、后端实现从数据库取出图片给前端5、前端拿到

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

SpringBoot接收JSON类型的参数方式

《SpringBoot接收JSON类型的参数方式》:本文主要介绍SpringBoot接收JSON类型的参数方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、jsON二、代码准备三、Apifox操作总结一、JSON在学习前端技术时,我们有讲到过JSON,而在

Spring Security注解方式权限控制过程

《SpringSecurity注解方式权限控制过程》:本文主要介绍SpringSecurity注解方式权限控制过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、摘要二、实现步骤2.1 在配置类中添加权限注解的支持2.2 创建Controller类2.3 Us

SpringBoot操作MaxComputer方式(保姆级教程)

《SpringBoot操作MaxComputer方式(保姆级教程)》:本文主要介绍SpringBoot操作MaxComputer方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的... 目录引言uqNqjoe一、引入依赖二、配置文件 application.properties(信息用自己