【Vue】引入 Vue Carousel 轮播图套件｜ 专案实作

背景

许多网页时常会加入轮播图的设计，用来放置活动讯息或是品牌视觉图片，传递资讯及强化品牌形象。因此也有许多轮播图的套件相继而出，如：swpier、owl 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