【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