
<template>
    <h-swipe :autoplay="3000"  @change="aa" class="asda">
        <h-swipe-item>
            <div class="sw-item">1</div>
        </h-swipe-item>
        <h-swipe-item>
            <div class="sw-item">2</div>
        </h-swipe-item>
        <h-swipe-item>
            <div class="sw-item">3</div>
        </h-swipe-item>
        <h-swipe-item>
            <div class="sw-item">4</div>
        </h-swipe-item>
        <h-swipe-item>
            <div class="sw-item">5</div>
        </h-swipe-item>
        <div class="custom-indicator" slot="indicator">
            {{ current + 1 }}/5
        </div>
    </h-swipe>
</template>

<script>
import { hSwipe, hSwipeItem } from './index.js';
export default {
    name: "swipe-demo",
    data() {
        return {
            type: 'primary',
            value: 2,
            current: 0
        }
    },
    components: {
        hSwipe,
        hSwipeItem
    },
    methods: {
        aa(v) {
            this.current = v;
        }
    }
}
</script>
<style>
    .asda {
        height: 150px;
    }
    .sw-item {
        height: 150px;
        background: #66c6f2;
        line-height: 150px;
        text-align: center;
        font-size: 28px;
    }
</style>