Ant?Design?Vue?走馬燈實現(xiàn)單頁多張圖片輪播效果

更新時間：2022年07月12日 14:08:58 作者：艾碼的日常生活

這篇文章主要介紹了Ant?Design?Vue?走馬燈實現(xiàn)單頁多張圖片輪播,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

最近的項目有個需求是，這種單頁多圖一次滾動一張圖片的輪播效果，項目組件庫是antd

然而用了antd的走馬燈是這樣子的

我們可以看到官網(wǎng)給的api是沒有這種功能，百度上也多是在css上動刀，那樣也就畢竟繁瑣了，我們是什么？我們是程序猿啊，程序猿就該有程序猿的樣子，怎么能寫繁瑣的東西呢，那還怎么為公司項目提高效率！??！(我哪敢說是為了摸魚啊)

為了追求摸魚的真諦我仔細查閱了文檔https://github.com/vueComponent/ant-design-vue/blob/master/components/vc-slick/src/default-props.js#L3

奈何內(nèi)容太多看得我眼花繚亂，最后通過我看字面意思一個個嘗試，功夫不負有心人，就是它啦去吧皮卡丘

:slides-to-show="5"http://單頁展示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>

最后來個效果展示