iT邦幫忙

1

【Vue】引入 Vue Carousel 輪播圖套件| 專案實作

7514 2021-11-29 23:44:503876 瀏覽

背景

許多網頁時常會加入輪播圖的設計,用來放置活動訊息或是品牌視覺圖片,傳遞資訊及強化品牌形象。因此也有許多輪播圖的套件相繼而出,如:swpierowl carousel,這兩個套件完整度高,可以做精細的客製化調整,垂直輪播、動畫效果...等,但本次的專案只需要單張圖片輪播、分頁導覽及上/下頁按鈕,因此選擇輕量的 Vue Carousel 套件。

安裝套件

npm install -S vue-carousel

註冊區域元件

<template>
   <carousel>
      <slide>
        Slide 1 Content
      </slide>
      <slide>
        Slide 2 Content
      </slide>
    </carousel>
</template>

<script>
    import { Carousel, Slide } from 'vue-carousel';
    export default {
      components: {
        Carousel,
        Slide
    }
};
</script>

客製化 API

  • 一次顯示的輪播數量(預設2個,調整為1個)
    Type: Number
    Default: 2
<carousel :perPage="1">
    <slide>
      Slide 1 Content
    </slide>
    <slide>
      Slide 2 Content
    </slide>
</carousel>
  • 自動播放(預設關閉,調整為開啟)
    Type: Boolean
    Default: false
<carousel :autoplay="ture">
    ...
</carousel>
  • 上下頁按鈕(預設隱藏,調整為顯示)
    Type: Boolean
    Default: false
<carousel :navigationEnabled="ture">
    ...
</carousel>
  • 換頁導覽的顏色(預設灰色,調整為白色)
    Type: String
    Default: #efefef
<carousel :paginationColor="'#FFF'">
    ...
</carousel>

資料來源:
https://ssense.github.io/vue-carousel/guide/
https://smlpoints.com/notes-vue-carousel-introduction.html


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言