Carousel

In a limited space, play the same type of pictures, text, etc. in a loop.

Basic Usage

Triggered using the click indicator.

<template>
    <KlCarousel class="block">
        <div class="carousel-item">1</div>
        <div class="carousel-item">2</div>
        <div class="carousel-item">3</div>
        <div class="carousel-item">4</div>
    </KlCarousel>
</template>
<script lang="ts"></script>
<style>
.block {
    margin: 20px;
}

.carousel-item {
    height: 300px;
    width: 400px;
    background-color: var(--theme-color-dark);
    color: aliceblue;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>

Triggered using the hover indicator.

<template>
    <KlCarousel class="block" trigger="hover">
        <div class="carousel-item">1</div>
        <div class="carousel-item">2</div>
        <div class="carousel-item">3</div>
        <div class="carousel-item">4</div>
    </KlCarousel>
</template>
<script lang="ts"></script>
<style>
.block {
    margin: 20px;
}

.carousel-item {
    height: 300px;
    width: 600px;
    background-color: var(--theme-color-dark);
    color: aliceblue;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>

The position of the indicator

By setting 'indicator-position' to 'outside' to implement the indicator outside, you can also set it to 'none' to hide the indicator

<template>
    <KlCarousel class="block" indicatorPosition="outside">
        <div class="carousel-item">1</div>
        <div class="carousel-item">2</div>
        <div class="carousel-item">3</div>
        <div class="carousel-item">4</div>
    </KlCarousel>
</template>
<script lang="ts"></script>
<style>
.block {
    margin: 20px;
}

.carousel-item {
    height: 300px;
    width: 400px;
    background-color: var(--theme-color-dark);
    color: aliceblue;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>

The toggle arrow shows the timing

Set the arrow display timing to always/only when the mouse is floating over it by setting the arrow property to always/hover/never.

<template>
    <KlCarousel class="block" arrow="always">
        <div class="carousel-item">1</div>
        <div class="carousel-item">2</div>
        <div class="carousel-item">3</div>
        <div class="carousel-item">4</div>
    </KlCarousel>
</template>
<script lang="ts"></script>
<style>
.block {
    margin: 20px;
}

.carousel-item {
    height: 300px;
    width: 400px;
    background-color: var(--theme-color-dark);
    color: aliceblue;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>

Carousel API

Carousel Attribute

The property name	Desprition	Type	Default Value
height	Marquee height, in px	`number`	300
width	Marquee width, in px	`number`	600
trigger	How the indicator is triggered	`string`(click\|hover)	click
autoplay	Whether to switch automatically	`boolean`	true
interval	The interval for automatic switching, in milliseconds	`number`	3000
indicator-position	The position of the indicator	`string`(outside\|none)	—
arrow	Toggles when the arrows are displayed	`string`（always\|hover\|never）	hover

Carousel #

Basic Usage #

The position of the indicator #

The toggle arrow shows the timing #

Carousel API #

Carousel Attribute #