swiper-vue/README.md

轮播 swiper slider component for Vue.js

swiper-vue,swiper
==========

## description 

基于vue3.0的轮播组件,有左右和上下轮播方向。

支持左右点击箭头切换，也可以点击下方指示器切换。

支持鼠标左键点击item项后滑动切换，支持鼠标滚动切换。

具体配置、事件、插槽可看下方详细文档

## 在vue单组件内部引入
``` html
<template>
    <swiper-vue autoplay :delay='2000' arrow='hover' indicator :items="options">
        <template #default="{ item, index,activeIndex,isActive }">
            <div style="height: 100%;width: 100%;background: #99A9BF;display: flex;justify-content: center;align-items: center;">{{ item.name }}</div>
        </template>
    </swiper-vue>
</template>
<script lang='ts' setup>
    import 'swiper-vue/dist/hut-es.css';
    import { SwiperVue } from 'swiper-vue';

    const options = [
        {
            name: 'swiper1'
        },
        {
            name: 'swiper2'
        },
        {
            name: 'swiper3'
        }
    ]
</script>
```

## 全局引入
```javascript
    import { createApp } from 'vue'
    import 'swiper-vue/dist/hut-es.css';
    import SwiperVue from 'swiper-vue';

    const $app = createApp(App);
    $app.use(SwiperVue);
    $app.mount('#app');`
```

## Properties
|property|type|default|description|
|:---|:---|:---|:---|
|items|Array|数据源|轮播数据源，数组形式|
|direction|String|horizontal|当前轮播的方向，默认为horizontal水平，vertical为垂直|
|autoplay|Boolean|true|是否自动播放轮播|
|delay|Number|2000|自动播放间隔，单位毫秒，默认2秒|
|indicator|Boolean|true|是否显示轮播底部指示器|
|mouseSlider|Boolean|true|是否开启鼠标点击轮播项左右滑动切换|
|triggerMove|Number|null|鼠标点击轮播项左右滑动切换的触发值，默认为滑动该容器1/2.5宽度或者高度切换|
|mouseScroll|Boolean|false|是否开启鼠标滚轮切换轮播，默认不开启|
|hoverStop|Boolean|true|鼠标悬停时暂停轮播，默认为true|
|arrow|String|always|左右切换箭头的显示形式，默认一直显示，值为always、hover、none|
|height|Number|200|轮播容器高度|
|width|Number|null|轮播容器宽度，默认为容器父元素宽度|

## swiper Event
|name|description|
|:---|:---|
|on-change|轮播切换后触发事件，function(type:'pre'|'next',goIndex: number){}|

## Swiper Slot
|name|description|
|:---|:---|
|default|轮播项内容,item为当前项值，index为当前索引，activeIndex为当前激活项索引，isActive为当前项是否激活|
|pre-icon|轮播左切换|
|next-icon|轮播右切换|