// 輪播組件
<template>
    <div class="swiper-box" :style="{width: width, height: height}" :class="swiperClass || ''">
        <i class="el-icon-arrow-left" role="button" @click="active=active>0 ? active-1 : list.length-1" v-show="!noShowDot && list.length>1"></i>
        <i class="el-icon-arrow-right" role="button" @click="active=active<list.length-1?active+1:0" v-show="!noShowDot && list.length>1"></i>

        <div class="el flex align-center justify-center" v-for="(item,i) in list" :key="i"
             :style="{transform: `translate(${(i-active)*100}%, 0%)`}">
 
                     ........
        </div>

    </div>
</template>

<script>
    export default {
        props: {
            active: {
                type: Number,
                default: 0
            },
            list: Array,
            width: String,
            height: String,
            swiperClass: String,
            noShowDot: Boolean
        },
        data () {
            return {
            }
        },
        methods: {
        }

    }
</script>

<style scoped lang="less">
    @import "../assets/less/variable";
    .swiper-box {
        width: 80vw;
        height: 70vh;
        position: relative;
        overflow: hidden;

        img, video {
            max-width: 100%;
            max-height: 100%;
        }

        .el {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            transition: all .4s ease-in-out;

        }

        .el-icon-arrow-left, .el-icon-arrow-right {
            position: absolute;
            top: 40%;
            left: 5px;
            border: 1px solid @border;
            border-radius: 50%;
            background: @gray6;
            color: @gray3;
            font-size: 40px;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            z-index: 10;
        }
        .el-icon-arrow-right {
            right: 5px;
            left: auto;
            cursor: pointer;
        }



    }

</style>