Ant?Design?Vue?走馬燈實(shí)現(xiàn)單頁多張圖片輪播效果
最近的項(xiàng)目有個(gè)需求是，這種單頁多圖一次滾動(dòng)一張圖片的輪播效果，項(xiàng)目組件庫是antd
然而用了antd的走馬燈是這樣子的
我們可以看到官網(wǎng)給的api是沒有這種功能，百度上也多是在css上動(dòng)刀，那樣也就畢竟繁瑣了，我們是什么？我們是程序猿啊，程序猿就該有程序猿的樣子，怎么能寫繁瑣的東西呢，那還怎么為公司項(xiàng)目提高效率！?。?我哪敢說是為了摸魚啊)
為了追求摸魚的真諦我仔細(xì)查閱了文檔https://github.com/vueComponent/ant-design-vue/blob/master/components/vc-slick/src/default-props.js#L3
奈何內(nèi)容太多看得我眼花繚亂，最后通過我看字面意思一個(gè)個(gè)嘗試，功夫不負(fù)有心人，就是它啦去吧皮卡丘
:slides-to-show="5"http://單頁展示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è)效果展示
到此這篇關(guān)于Ant Design Vue 走馬燈實(shí)現(xiàn)單頁多張圖片輪播的文章就介紹到這了,更多相關(guān)Ant Design Vue 圖片輪播內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解如何創(chuàng)建基于vite的vue項(xiàng)目
vite 這個(gè)是尤大開發(fā)的新工具,目的是以后替代webpack,下面這篇文章主要給大家介紹了關(guān)于如何創(chuàng)建基于vite的vue項(xiàng)目的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
這篇文章主要為大家介紹了Vue.js中安裝一個(gè)路由器demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
springboot?vue接口測試前端動(dòng)態(tài)增刪表單功能實(shí)現(xiàn)
這篇文章主要為大家介紹了springboot?vue接口測試前端動(dòng)態(tài)增刪表單功能實(shí)現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
這篇文章主要介紹了解決vue $http的get和post請求跨域問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-06-06
element-ui中的clickoutside點(diǎn)擊空白隱藏元素
這篇文章主要為大家介紹了element-ui中的clickoutside點(diǎn)擊空白隱藏元素示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了淺入深出Vue之自動(dòng)化路由，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了在Vue3項(xiàng)目中使用如何echarts問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue3+vite+ts?通過svg-sprite-loader?插件使用自定義圖標(biāo)的詳細(xì)步驟
這篇文章主要介紹了vue3+vite+ts通過svg-sprite-loader插件使用自定義圖標(biāo),本文分步驟給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
詳解Vue如何實(shí)現(xiàn)自定義動(dòng)畫與動(dòng)畫效果設(shè)計(jì)
在Vue中，動(dòng)畫效果是非常有用的，它可以使用戶界面變得更加生動(dòng)、有趣，本文中我們將學(xué)習(xí)如何在Vue中進(jìn)行自定義動(dòng)畫與動(dòng)畫效果設(shè)計(jì)，感興趣的可以了解一下2023-06-06
vue左右側(cè)聯(lián)動(dòng)滾動(dòng)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue左右側(cè)聯(lián)動(dòng)滾動(dòng)的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06