Ant Design Vue 走马灯实现单页多张图片轮播

2022-07-11 13:39:53 阅读：248 来源： 互联网

标签：arrow Vue 轮播单页 slick custom ant carousel 25px

最近的项目有个需求是，这种单页多图一次滚动一张图片的轮播效果，项目组件库是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>

最后来个效果展示

标签：arrow,Vue,轮播,单页,slick,custom,ant,carousel,25px
来源： https://www.cnblogs.com/dengsir39/p/16466039.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Ant Design Vue 走马灯实现单页多张图片轮播