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

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

　　项目中要求单页多图一次滚动一张图片的轮播效果，且项目组件库是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>

　　最后来个效果展示

云服务器 GPU云服务器 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
JS实现图片轮播跑马灯代码

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

3403771864 2022-10-10 21:58 评论0 收藏0