Ant Design Vue 走马灯实现单页多张图片轮播
最近的项目有个需求是,这种单页多图一次滚动一张图片的轮播效果,项目组件库是antd
然而用了antd的走马灯是这样子的
我们可以看到官网给的api是没有这种功能,百度上也多是在css上动刀,那样也就毕竟繁琐了,我们是什么?我们是程序猿啊,程序猿就该有程序猿的样子,怎么能写繁琐的东西呢,那还怎么为公司项目提高效率!!!(我哪敢说是为了摸鱼啊)
为了追求摸鱼的真谛我仔细查阅了文档https://github.com/vueComponent/ant-design-vue/blob/master/components/vc-slick/src/default-props.js#L3
奈何内容太多看得我眼花缭乱,最后通过我看字面意思一个个尝试,功夫不负有心人,就是它啦去吧皮卡丘
:slides-to-show="5"//单页展示5张图片 :slides-to-scroll="1" //每次滚动1张图片
1 <template>
2 <!-- 推荐品牌 -->
3 <div class="recommended_brand">
4 <h2>推荐品牌</h2>
5 <div class="subscript"></div>
6 <!-- 推荐商品轮播图 -->
7 <div class="rotation_chart">
8 <a-carousel arrows autoplay dots="false" :slides-to-show="5" :slides-to-scroll="1">
9 <div slot="prevArrow" class="custom-slick-arrow">
10 <img src="@/assets/img/home/recommend_left.png" />
11 </div>
12 <div slot="nextArrow" class="custom-slick-arrow">
13 <img src="@/assets/img/home/recommend_right.png" />
14 </div>
15 <div>
16 <h3>1</h3>
17 </div>
18 <div>
19 <h3>2</h3>
20 </div>
21 <div>
22 <h3>3</h3>
23 </div>
24 <div>
25 <h3>4</h3>
26 </div>
27 <div>
28 <h3>5</h3>
29 </div>
30 <div>
31 <h3>6</h3>
32 </div>
33 <div>
34 <h3>7</h3>
35 </div>
36 </a-carousel>
37 </div>
38 </div>
39 </template>
1 <style scoped>
2 /* For demo */
3 .ant-carousel >>> .slick-slide {
4 text-align: center;
5 height: 72px;
6 width: 186px;
7 line-height: 72px;
8 background: #5e82c6;
9 overflow: hidden;
10 }
11
12 .ant-carousel >>> .custom-slick-arrow {
13 width: 25px;
14 height: 25px;
15 font-size: 25px;
16 color: #fff;
17 /* background-color: rgba(31, 45, 61, 0.11); */
18 opacity: 0.8;
19 }
20 .ant-carousel >>> .custom-slick-arrow:first-child {
21 left: -30px;
22 }
23 .ant-carousel >>> .custom-slick-arrow:last-child {
24 right: -30px;
25 }
26 .ant-carousel >>> .custom-slick-arrow:before {
27 display: none;
28 }
29 .ant-carousel >>> .custom-slick-arrow:hover {
30 opacity: 1;
31 }
32
33 .ant-carousel >>> .slick-slide h3 {
34 color: #fff;
35 }
36 </style>
最后来个效果展示
Ant Design Vue 走马灯实现单页多张图片轮播的更多相关文章
- 文档驱动 —— 表单组件(五):基于Ant Design Vue 的表单控件的demo,再也不需要写代码了。
源码 https://github.com/naturefwvue/nf-vue3-ant 特点 只需要更改meta,既可以切换表单 可以统一修改样式,统一升级,以最小的代价,应对UI的升级.切换,应 ...
- 基于Ant Design Vue封装一个表单控件
开源代码 https://github.com/naturefwvue/nf-vue3-ant 有缺点本来是写在最后的,但是博文写的似乎有点太长了,估计大家没时间往下看,于是就把有缺点写在前面了,不喜 ...
- 基于VUE的SPA单页应用开发-加载性能篇
1.基于异步数据的vue页面刷新 先看看基于异步数据的vue页面刷新后,都发生了啥- 如图所示: 图1 基于异步数据的vue页面刷新 网络请求图 步骤如下: step1:请求页面: step2:请求页 ...
- Ant Design Vue select下拉列表设置默认值
在项目中需要为Ant Design Vue 的 select 组件设置一个默认值,如下图所示的状态下拉选择框,默认选择全部 代码如下: <a-select v-model="query ...
- Ant Design Vue Pro 项目实战-项目初始化(一)
写在前面 时间真快,转眼又是新的一年.随着前后端技术的不断更新迭代,尤其是前端,在目前前后端分离开发模式这样的一个大环境下,交互性.兼容性等传统的开发模式已经显得有些吃力.之前一直用的是react,随 ...
- 使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换
使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换 需求: 日历区分交易日.非交易日 可以切换面板查看整年交易日信息 可以在手动调整交易日.非交易日 演示实例 序--使用软 ...
- 使用npm安装 Ant Design Vue 时报错—ant-design-vue@latest(sha1-qsf / gCIFcRYxyGmOKgx7TmHf1z4 =)seems to be corrupted.
安装 Ant Design Vue 时报错: npm install ant-design-vue --save ant-design-vue @ latest(sha1-qsf / gCIFcRYx ...
- Vue3学习(二)之集成Ant Design Vue
一.集成Ant Design Vue npm install ant-design-vue@2.0.0-rc.3 --save 兼容性 Ant Design Vue 2.x 支持所有的现代浏览器. 如 ...
- 使用 Vuex + Vue.js 构建单页应用
鉴于该篇文章阅读量大,回复的同学也挺多的,特地抽空写了一篇 vue2.0 下的 vuex 使用方法,传送门:使用 Vuex + Vue.js 构建单页应用[新篇] ------------------ ...
随机推荐
- 『现学现忘』Git基础 — 18、Git对象的总结
目录 1.Git操作最基本的流程 2.工作目录中文件的状态 3.Git效率说明 提示:前面三篇文章已经分别的对blob对象.tree对象.commit对象进行了详细的说明,这篇文章我们总结一下,Git ...
- StringBoot整合ELK实现日志收集和搜索自动补全功能(详细图文教程)
@ 目录 StringBoot整合ELK实现日志收集和搜索自动补全功能(详细图文教程) 一.下载ELK的安装包上传并解压 1.Elasticsearch下载 2.Logstash下载 3.Kibana ...
- AsyncLocal<T>在链路追踪中的应用
前言 在项目生产中日志的记录是必不可少的,在.net项目中,要说日志组件,log4net绝对可有一席之地,随着公司业务的发展,微服务则必定无可避免.在跨服务中通过日志进行分析性能或者排查故障点,如何快 ...
- php错误异常及其排错
错误和异常 错误 php程序自身的问题,一般是由非法的语法,环境问题导致 异常 一般是业务逻辑上出现的不合预期.与正常流程不同的状况,不是语法错误 错误异常继承关系 小括号表示php版本 php7下的 ...
- sa-token server认证逻辑
sa-token client登录逻辑
- burp通过条件竞争上传文件
一·何为条件竞争 现代框架更能抵御此类攻击.他们通常不会将文件直接上传到文件系统上的预期目的地.相反,他们采取了预防措施,例如首先上传到临时的沙盒目录并随机命名以避免覆盖现有文件.然后,他们对这个临时 ...
- 现代 CSS 解决方案:CSS 数学函数
在 CSS 中,其实存在各种各样的函数.具体分为: Transform functions Math functions Filter functions Color functions Image ...
- Sharding JDBC案例实战
基础分库 以下实例基于shardingsphere 4.1.0 + SpringBoot 2.2.5.RELEASE版本 依赖导入: <properties> <project.bu ...
- 23. Merge k Sorted Lists - LeetCode
Question 23. Merge k Sorted Lists Solution 题目大意:合并链表数组(每个链表中的元素是有序的),要求合并后的链表也是有序的 思路:遍历链表数组,每次取最小节点 ...
- 分布式下Session一致性问题
一.Session一致性问题 1.1 什么是Session 用户使用网站的服务,基本上需要浏览器和web服务器进行多次交互,web服务器如何知道哪些请求是来自哪个会话的? 具体方式为:在会话开始时,分 ...