<template>
    <div class="ht-base-carousel-custom-demo">
        <ht-base-carousel autoplay radius-dot :height="460" loop>
            <ht-base-carousel-item class="demo-carousel" style="background-color: #F5F5F5">
                <img src="http://39.106.250.14:8082/base-components/static/carousel_1.svg"/>
            </ht-base-carousel-item>
            <ht-base-carousel-item class="demo-carousel" style="background-color: #FFEFE6">
                <img src="http://39.106.250.14:8082/base-components/static/carousel_2.svg"/>
            </ht-base-carousel-item>
            <ht-base-carousel-item class="demo-carousel" style="background-color: #FFF9E6">
                <img src="http://39.106.250.14:8082/base-components/static/carousel_3.svg"/>
            </ht-base-carousel-item>
            <ht-base-carousel-item class="demo-carousel" style="background-color: #e6f7ff">
                <img src="http://39.106.250.14:8082/base-components/static/carousel_4.svg"/>
            </ht-base-carousel-item>
            <ht-base-carousel-item class="demo-carousel" style="background-color: #edfff3">
                <img src="http://39.106.250.14:8082/base-components/static/carousel_5.svg"/>
            </ht-base-carousel-item>
        </ht-base-carousel>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseCarouselCustomDemo',
    }
</script>
<style lang="less">
    .ht-base-carousel-custom-demo {
        .demo-carousel img {
            width: 100%;
            height: 100%;
        }
    }


</style>

