單頁多張圖片輪播效果用AntDesignVue走馬燈實(shí)現(xiàn)

3403771864 發(fā)布于2022-10-23 14:31 / 1397人閱讀

　　項(xiàng)目中要求單頁多圖一次滾動(dòng)一張圖片的輪播效果，且項(xiàng)目組件庫是antd

　　在使用antd后展現(xiàn)的走馬燈

　　其實(shí)很想吐槽，但還是不說了吧。

　　在https://github.com/vueComponent/ant-design-vue/blob/master/components/vc-slick/src/default-props.js#L3中

　　簡(jiǎn)單來說就是太多知識(shí)，腦子一團(tuán)漿糊，怎么辦那？看看下面代碼：

　　:slides-to-show="5"//單頁展示5張圖片 :slides-to-scroll="1" //每次滾動(dòng)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>

　　最后來個(gè)效果展示