Ant Design Vue多张图为一组轮播展示

目的

实现多张图为一组轮播展示效果

H5代码块

<div class="rightDisplay"><a-carousel arrows autoplay><div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: -24px;zIndex: 1"><a-icon type="left-circle" /></div><div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: -24px"><a-icon type="right-circle" /></div><div v-for="(obj,key) in rightDisplay" :key="key"><div v-for="(obj2,key) in obj.imgs" :key="key" class="hotBox"><img :src="obj2.src"/><h3>{{obj2.title}}</h3></div></div></a-carousel>
</div>

CSS代码块

.rightDisplay .ant-carousel .slick-slide {height: 250px;overflow: hidden;background: #fff;
}
.rightDisplay .ant-carousel .slick-slide .hotBox{width: 30%;float: left;margin-left: 2.5%
}
.rightDisplay .ant-carousel .slick-slide .hotBox img{height:200px;
}
.rightDisplay .ant-carousel .custom-slick-arrow {width: 25px;height: 25px;font-size: 25px;color: #fff;background-color: rgba(31, 61, 35, 0.11);opacity: 0.5;
}
.rightDisplay .ant-carousel .custom-slick-arrow:before {display: none;
}
.rightDisplay .ant-carousel .custom-slick-arrow:hover {opacity: 0.7;
}

数据

rightDisplay:[{imgs:[{src:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1672984128,966606357&fm=26&gp=0.jpg",title:"版权名称",},{src:"https://www.baidu.com/img/bd_logo1.png",title:"版权名称2",},{src:"http://img2.imgtn.bdimg.com/it/u=3580499685,2387378571&fm=26&gp=0.jpg",title:"版权名称3",}],},{imgs:[{src:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1672984128,966606357&fm=26&gp=0.jpg",title:"版权名称4",},{src:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1672984128,966606357&fm=26&gp=0.jpg",title:"版权名称5",},{src:"http://img2.imgtn.bdimg.com/it/u=3580499685,2387378571&fm=26&gp=0.jpg",title:"版权名称6",}],
}],

Ant Design Vue多张图为一组轮播展示相关推荐

轮播图（无缝轮播图）
1.无缝轮播核心: 在最后多加一张第一张图, 当达到最后一张t1的时候一瞬间将ul拉回到0的位置结构: <div class="wrap"><ul>&l ...
chrome插件开发（manifest_version版本V3 + Ant Design Vue）
1.什么是 Chrome 插件谷歌浏览器插件是一种小型的定制浏览器体验的程序,通过插件可以自定义浏览器的一些行为来适合个人的需求,例如上面的查看服务器状态插件. 在应用商店中下载下来的插件基本上都是 ...
ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
【Ant Design Vue】之Grid栅格和Space间距
文章目录 Grid 栅格 Space 间距 Grid 栅格 Ant Design Vue 将整个设计建议区域按照 24 等分的原则进行划分,划分之后的信息区块我们称之为『盒子』.建议横向排列的盒子数量 ...
ant design vue pro 支持多页签模式页签可以缓存
ant design vue pro 支持多页签模式页签可以缓存代码贴在最后启动之后页面是这样的: 第一步:修改 src/layouts/BasicLayout.vue 文件,在该文件中添加mu ...
Vue 2.x折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件
前言这次的后台管理系统项目选型用了Vue来作为主技术栈: 因为前段时间用过React来写过项目(用了antd),感觉棒棒的. 所以这次就排除了Element UI,而采用了Ant Design Vu ...
VUE3 使用 Ant Design Vue 图标库的图标
emmm 就是 Ant Design Vue 这玩意用来做蛮好的支持VUE3 所以这里用了这个了. 首先他支持你一个个导入那岂不是.....傻里傻气的 ,所以我们一次性导入! 1. 先安装: ...
ant design vue利用rowClassName给table添加行样式
ant design vue利用rowClassName给table添加行样式目录 1. 需求:表格每行数据hasVerdict值不为'1'时标红显示 2. 实现方式:table属性rowClass ...
Vue3 UI组件库对比，Naive UI、Element Plus、 Ant Design Vue
对比图 \ Element Plus Naive ui Ant Design Vue 简介 element-ui Vue3版本,国内使用广泛 Vue作者推荐的Vue3ui 组件库阿里Ant Desi ...

Ant Design Vue多张图为一组轮播展示

目的

H5代码块

CSS代码块

数据

Ant Design Vue多张图为一组轮播展示相关推荐

最新文章

热门文章