<template>
    <div class="image-carousel">
        <swipe :continuous="false" :auto="0" :show-indicators="goods && goods.length > 1">
            <swipe-item v-for="item in goods">
                <a href="#" title="{{item.title}}">
                    <img :src="item.colorImage | resize 750 1000" width="100%" alt="">
                </a>
            </swipe-item>
        </swipe>
    </div>
</template>
<style l>
    .image-carousel {
        width: 100%;
        height: 1000px;

        .swipe {
            height: 100%;
        }

        .swipe-indicators {
            left: auto;
            right: 32px;
        }

        .swipe-indicator {
            width: 8px;
            height: 8px;
            line-height: 12px;
            display: inline-block;

            &.active {
                width: 12px;
                height: 12px;
                background: #000;
                opacity: 0.6;
                margin: -2px 5px;
            }
        }
    }
</style>
<script>
    const swipe = require('yoho-vue-swipe');

    require('common/vue-filter');

    module.exports = {
        props: {
            goods: [Object]
        },
        data() {
            return {};
        },
        components: {
            swipe: swipe.Swipe,
            swipeItem: swipe.SwipeItem,
        }
    };
</script>