单页多张图片轮播效果用AntDesignVue走马灯实现

3403771864 发布于2022-10-23 14:31 / 963人阅读

　　项目中要求单页多图一次滚动一张图片的轮播效果，且项目组件库是antd

　　在使用antd后展现的走马灯

　　其实很想吐槽，但还是不说了吧。

　　在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张图片

　　<template>
　　<!-- 推荐品牌 -->
　　<div class="recommended_brand">
　　<h2>推荐品牌</h2>
　　<div class="subscript"></div>
　　<!-- 推荐商品轮播图 -->
　　<div class="rotation_chart">
　　<a-carousel arrows autoplay dots="false" :slides-to-show="5" :slides-to-scroll="1">
　　<div slot="prevArrow" class="custom-slick-arrow">
　　<img src="@/assets/img/home/recommend_left.png" />
　　</div>
　　<div slot="nextArrow" class="custom-slick-arrow">
　　<img src="@/assets/img/home/recommend_right.png" />
　　</div>
　　<div>
　　<h3>1</h3>
　　</div>
　　<div>
　　<h3>2</h3>
　　</div>
　　<div>
　　<h3>3</h3>
　　</div>
　　<div>
　　<h3>4</h3>
　　</div>
　　<div>
　　<h3>5</h3>
　　</div>
　　<div>
　　<h3>6</h3>
　　</div>
　　<div>
　　<h3>7</h3>
　　</div>
　　</a-carousel>
　　</div>
　　</div>
　　</template>

　　<style scoped>
　　/* For demo */
　　.ant-carousel >>> .slick-slide {
　　text-align: center;
　　height: 72px;
　　width: 186px;
　　line-height: 72px;
　　background: #5e82c6;
　　overflow: hidden;
　　}
　　.ant-carousel >>> .custom-slick-arrow {
　　width: 25px;
　　height: 25px;
　　font-size: 25px;
　　color: #fff;
　　/* background-color: rgba(31, 45, 61, 0.11); */
　　opacity: 0.8;
　　}
　　.ant-carousel >>> .custom-slick-arrow:first-child {
　　left: -30px;
　　}
　　.ant-carousel >>> .custom-slick-arrow:last-child {
　　right: -30px;
　　}
　　.ant-carousel >>> .custom-slick-arrow:before {
　　display: none;
　　}
　　.ant-carousel >>> .custom-slick-arrow:hover {
　　opacity: 1;
　　}
　　.ant-carousel >>> .slick-slide h3 {
　　color: #fff;
　　}
　　</style>

　　最后来个效果展示

私有云超融合服务器 js图片轮播效果走马灯效果 js实现图片渐入效果 js跑马灯效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/128196.html

面试官(6): 写过『通用前端组件』吗?

摘要：很久没上掘金发现草稿箱里存了好几篇没发的文章最近梳理下发出来往期面试官系列如何实现深克隆面试官系列的实现面试官系列前端路由的实现面试官系列基于数据劫持的双向绑定优势所在面试官系列你为什么使用前端框架前言设计前端组件是最能考验开发者基本功的测很久没上掘金,发现草稿箱里存了好几篇没发的文章,最近梳理下发出来往期面试官系列(1): 如何实现深克隆面试官系列(2): Event Bus...

waltr 2019-05-27 17:43 评论0 收藏0
最简单的无缝轮播

摘要：昨天学习了轮播的原理，今天再来看看无缝轮播的技术。无缝轮播无缝轮播的原来大致类似小时候跳大绳，小朋友一个个进入，一个个出来，出来后排到队伍末尾，等在着进入，无缝轮播也类似这种机制。昨天学习了轮播的原理，今天再来看看无缝轮播的技术。昨天学习的轮播机制类似于走马灯，所有图片排成一排，轮流在你眼前走过，你就会感觉他们动起来了，今天学的无缝轮播就不能用昨天的思路了，它和昨天最大的区别是，从...

Kyxy 2019-08-22 17:25 评论0 收藏0
用element-ui的走马灯carousel轻松实现自适应全屏banner图

摘要：写在前面网站轮播图建议使用组件，非常方便快捷。接手一个项目，轮播图是用的实现的，看起来效果还不错，只是固定宽高，并未做适配，于是将就代码做下修改，以适配各种显示器屏幕。写在前面：网站轮播图建议使用swiper组件，非常方便快捷。接手一个项目，轮播图是用element-ui的carousel实现的，看起来效果还不错，只是固定宽高，并未做适配，于是将就代码做下修改，以适配各种显示器屏幕...

Mr_houzi 2019-08-05 13:49 评论0 收藏0
JS实现图片轮播跑马灯代码

　　今天为大家讲述的就是JS实现图片轮播跑马灯的具体代码，不说废话直接看下面：　　实现原理：　　1、准备一个展示区域的盒子，设置宽高；　　2、准备一个存放所有图片的盒子，将所有图片依次放入，设置溢出隐藏　　一、HTML布局　　<divclass="wrapper"> 　　<divid="container"><!--图片展示区域...

3403771864 2022-10-10 21:58 评论0 收藏0
iOS开发特效源码：swift轮播图导航渐变跑马灯分段选择下拉菜单物流时间轴

摘要：轮播图纯实现导航渐变，并保持状态跑马灯上下跑马灯分段选择，自定义，项目简单搭建一个简单的弹性动画，类似微信评价点赞按钮的弹出动画内置调试工具下拉菜单列表选择图片预览框架关于自定义返回按钮物流时间轴自动匹配电话号码可点击拨打 1、轮播图（纯swift实现） showImg(https://segmentfault.com/img/remote/1460000013731963?w=22...

Ververica 2019-06-25 16:40 评论0 收藏0