Carousel

Carousel is used to display multiple pictures, videos, or embedded frames and other content in a loop, and supports automatic playback or manual switching by the user.

Basic usage

Auto

You can set whether to switch automatically through autoPlay.You can set moveSpeed, timingFunc to achieve different switching slide effects.

Indicator

You can specify the indicator type：dot、line、slider and position left、right、top、bottom、outer。

dotlineslider

<template>
  <div class="mb-2">
    <tu-radio-group
      type="button"
      v-model="indicatorType"
      @change="handleIndicatorTypeChange"
    >
      <tu-radio label="dot">dot</tu-radio>
      <tu-radio label="line">line</tu-radio>
      <tu-radio label="slider">slider</tu-radio>
    </tu-radio-group>
  </div>
  <div class="mb-2">
    <tu-radio-group
      type="button"
      v-model="indicatorPosition"
      @change="handleIndicatorPositionChange"
    >
      <tu-radio label="left">left</tu-radio>
      <tu-radio label="right">right</tu-radio>
      <tu-radio label="top">top</tu-radio>
      <tu-radio label="bottom">bottom</tu-radio>
      <tu-radio label="outer">outer</tu-radio>
    </tu-radio-group>
  </div>

  <tu-carousel
    show-arrow="never"
    :indicator-type="indicatorType"
    :indicator-position="indicatorPosition"
    :style="{ height: '240px' }"
  >
    <tu-carousel-item v-for="item in 3">
      <h3>{{ item }}</h3>
    </tu-carousel-item>
  </tu-carousel>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const indicatorType = ref('dot');
const handleIndicatorTypeChange = (_indicatorType: string) => {
  indicatorType.value = _indicatorType;
};

const indicatorPosition = ref('bottom');
const handleIndicatorPositionChange = (_indicatorPosition: string) => {
  indicatorPosition.value = _indicatorPosition;
};
</script>

<style scoped>
.tu-carousel__item:first-child {
  background-color: #875c00;
}

.tu-carousel__item:nth-child(2n) {
  background-color: #035880;
}

.tu-carousel__item:last-child {
  background-color: #2a3c85;
}

.tu-carousel h3 {
  text-align: center;
  line-height: 240px;
  margin-top: 0;
  color: #fff;
}
</style>

<template>
  <div class="mb-2">
    <tu-radio-group
      type="button"
      v-model="indicatorType"
      @change="handleIndicatorTypeChange"
    >
      <tu-radio label="dot">dot</tu-radio>
      <tu-radio label="line">line</tu-radio>
      <tu-radio label="slider">slider</tu-radio>
    </tu-radio-group>
  </div>
  <div class="mb-2">
    <tu-radio-group
      type="button"
      v-model="indicatorPosition"
      @change="handleIndicatorPositionChange"
    >
      <tu-radio label="left">left</tu-radio>
      <tu-radio label="right">right</tu-radio>
      <tu-radio label="top">top</tu-radio>
      <tu-radio label="bottom">bottom</tu-radio>
      <tu-radio label="outer">outer</tu-radio>
    </tu-radio-group>
  </div>

  <tu-carousel
    show-arrow="never"
    :indicator-type="indicatorType"
    :indicator-position="indicatorPosition"
    :style="{ height: '240px' }"
  >
    <tu-carousel-item v-for="item in 3">
      <h3>{{ item }}</h3>
    </tu-carousel-item>
  </tu-carousel>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const indicatorType = ref('dot');
const handleIndicatorTypeChange = (_indicatorType: string) => {
  indicatorType.value = _indicatorType;
};

const indicatorPosition = ref('bottom');
const handleIndicatorPositionChange = (_indicatorPosition: string) => {
  indicatorPosition.value = _indicatorPosition;
};
</script>

<style scoped>
.tu-carousel__item:first-child {
  background-color: #875c00;
}

.tu-carousel__item:nth-child(2n) {
  background-color: #035880;
}

.tu-carousel__item:last-child {
  background-color: #2a3c85;
}

.tu-carousel h3 {
  text-align: center;
  line-height: 240px;
  margin-top: 0;
  color: #fff;
}
</style>

Vertical

By default, the direction is horizontal. Use the vertical direction switch by setting the direction to vertical.

Animation card

When the space in the width direction of the page is vacant, but the space in the height direction is surplus, you can specify animation as card to use card style.

Animation fade

Set animation=fade to use fade transition effect.

Carousel API

Carousel Attributes

Name	Description	Type	Default
current(v-model)	The index of current slide which starts from 1	`Number`	-
default-current	Default index of current slide	`Number`	1
auto-play	Whether to automatically loop the display, or pass in { interval: the time interval for switching (default: 3000), hoverToPause: whether to pause switching while hover (default: true) } for configuration	`Boolean` `CarouselAutoPlayConfig`	false
move-speed	The duration of the slide movement(ms)	`Number`	500
animation-name	The animation of the slide movement	`String`	slide
trigger	How to trigger the slide switch, click/hover the indicator	`String`	click
direction	The direction of the slide movement	`String`	vertical
show-arrow	When to show the arrow used to switch	`String`	always
arrow-class	The additional css class to arrow used to switch	`String`	-
indicator-type	Type of indicator	`String`	dot
indicator-position	Position of indication	`String`	bottom
indicator-class	The additional css class to indicator	`String`	-
transition-timing-function	How intermediate values are calculated for CSS properties being affected by a transition effect.transition-timing-function	`String`	cubic-bezier(0.34, 0.69, 0.1, 1)

Carousel Events

Name	Description	Type
change	Callback when slide changes	`Function`

Carousel ​

Basic usage ​

Auto ​

Indicator ​

Vertical ​

Animation card ​

Animation fade ​

Carousel API ​

Carousel Attributes ​

Carousel Events ​