### HSwiper
介绍：所谓 `HSwiper`即轮播图组件，现在大部分网站都会在其头部利用轮播图组件，一来可以为网站增添媒体元素，提升用户体验，二来也可以提供最新的活动和通知消息。
<table>
<caption>HSwiper 属性</caption>
<thead>
<th>属性</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</thead>
<tbody>
<tr>
<td>value</td>
<td>当前轮播图所在帧数的下标，用 v-model 绑定</td>
<td>Number</td>
<td>-</td>
</tr>
<tr>
<td>items</td>
<td>每一帧用到的数据，包括图片地址和标题</td>
<td>Array</td>
<td>[]</td>
</tr>
<tr>
<td>interval</td>
<td>播放间隔，以秒为单位</td>
<td>Number</td>
<td>3</td>
</tr>
<tr>
<td>color</td>
<td>当一帧被选中时，对应小圆圈的背景颜色</td>
<td>String</td>
<td>#F46060</td>
</tr>
<tr>
<td>arrow</td>
<td>决定是否有左右选择箭头</td>
<td>Boolean</td>
<td>false</td>
</tr>
</tbody>
</table>
<table>
<caption>item 属性</caption>
<thead>
<th>属性</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</thead>
<tbody>
<tr>
<td>title</td>
<td>标题</td>
<td>String | Number</td>
<td>-</td>
</tr>
<tr>
<td>src</td>
<td>图片的链接</td>
<td>String</td>
<td>-</td>
</tr>
</tbody>
</table>
示例代码：
<template>
<div class="container">
<div class="box">
<HSwiper :items="items" v-model="select1" @onClick="clickHandler"></HSwiper>
</div>
<div class="box">
<HSwiper :items="items" v-model="select2" :arrow="arrow"></HSwiper>
</div>
</div>
</template>
<script>
import { HSwiper } from 'vuecomponent'
export default {
components: {
HSwiper
},
data () {
return {
items: [
{ title: '折得一枝香在手,人间应未有', src: 'https://images.unsplash.com/photo-1500534623283-312aade485b7?dpr=1&auto=compress,format&fit=crop&w=1500&h=&q=80&cs=tinysrgb&crop='},
{ title: '野火烧不尽,春风吹又生', src: 'https://images.unsplash.com/photo-1489619243109-4e0ea59cfe10?dpr=1&auto=compress,format&fit=crop&w=1500&h=&q=80&cs=tinysrgb&crop=' },
{title: '无可奈何花落去,似曾相识燕归来', src:'https://images.unsplash.com/photo-1487792679672-426a0e091886?dpr=1&auto=compress,format&fit=crop&w=1500&h=&q=80&cs=tinysrgb&crop='}
],
select1: 0,
select2: 0,
arrow: true
}
},
methods: {
clickHandler (index) {
console.log(index)
}
}
}
</script>
<style scoped>
.box {
width: 480px;
height: 240px;
margin-right: 24px;
}
.container {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
</style>
效果示意图:
