Ant Design Vue 走马灯实现单页多张图片轮播(ant design vue2.0)

最近的项目有个需求是，这种单页多图一次滚动一张图片的轮播效果，项目组件库是antd 然而用了antd的走马灯是这样子的 我们可以看到官网给的api是没有这种功能，百度上也多是在css上动刀，那样也就毕竟繁琐了，我们是什么？我们是程序猿啊，程序猿就该有程序猿的样子，怎么能写繁琐的东西呢，那还怎么为公司 ...

推荐整理分享Ant Design Vue 走马灯实现单页多张图片轮播(ant design vue2.0)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:ant design vue github,ant design vue源码,ant design mobile vue,ant design vue3,ant design vue github,ant design vue2,ant design vue2,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>

最后来个效果展示