본문으로 바로가기 본문 바로가기
WIKI 기술 지식 베이스

Carousel 캐러셀

원문 보기 위키 갱신

한 장씩 넘어가며 보여 주는 영역이에요.

출처: 문서

본문

언제 사용하나요?

  1. 이미지나 카드를 보여 줄 때 사용해요.

기본 사용법

:::demo

<template>
  <d-carousel height="200px">
    <d-carousel-item class="d-carousel-item" v-for="item in items" :key="item">{{ item }}</d-carousel-item>
  </d-carousel>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const items = ref<string[]>(['page 1', 'page 2', 'page 3', 'page 4']);
    return {
      items,
    };
  },
});
</script>
<style>
.d-carousel-item {
  text-align: center;
  line-height: 200px;
  background: var(--devui-global-bg, #f3f6f8);
}
</style>

:::

전환 시간

:::demo

<template>
  <d-carousel height="200px" :transition-speed="5000">
    <d-carousel-item class="d-demo-carousel-item" v-for="item in items" :key="item">{{ item }}</d-carousel-item>
  </d-carousel>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const items = ref<string[]>(['page 1', 'page 2', 'page 3', 'page 4']);
    return {
      items,
    };
  },
});
</script>
<style>
.d-demo-carousel-item {
  text-align: center;
  line-height: 200px;
  background: var(--devui-global-bg, #f3f6f8);
}
</style>

:::

인디케이터 & 전환 화살표

arrowTrigger를 always로 설정하면 화살표가 항상 표시되고, dotTrigger를 hover로 설정하면 점에 hover하기만 해도 전환돼요.

:::demo

<template>
  <d-carousel height="200px" arrowTrigger="always" dot-trigger="hover">
    <d-carousel-item class="d-carousel-item" v-for="item in items" :key="item">{{ item }}</d-carousel-item>
  </d-carousel>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const items = ref<string[]>(['page 1', 'page 2', 'page 3', 'page 4']);
    return {
      items,
    };
  },
});
</script>
<style>
.d-carousel-item {
  text-align: center;
  line-height: 200px;
  background: var(--devui-global-bg, #f3f6f8);
}
</style>

:::

자동 재생

:::demo

<template>
  <d-carousel height="200px" autoplay :autoplay-speed="3000">
    <d-carousel-item class="d-carousel-item" v-for="item in items" :key="item">{{ item }}</d-carousel-item>
  </d-carousel>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const items = ref<string[]>(['page 1', 'page 2', 'page 3', 'page 4']);
    return {
      items,
    };
  },
});
</script>
<style>
.d-carousel-item {
  text-align: center;
  line-height: 200px;
  background: var(--devui-global-bg, #f3f6f8);
}
</style>

:::

커스텀 조작

:::demo

<template>
  <d-carousel ref="carousel" height="200px" arrowTrigger="never">
    <d-carousel-item class="d-carousel-item" v-for="item in items" :key="item">{{ item }}</d-carousel-item>
  </d-carousel>
  <div class="carousel-demo-operate">
    <d-button @click="onPrev">上一张</d-button>
    <d-button @click="onNext">下一张</d-button>
    <d-button @click="onGoFirst">第一张</d-button>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const items = ref<string[]>(['page 1', 'page 2', 'page 3', 'page 4']);
    const carousel = ref();
    const onPrev = () => {
      carousel.value?.prev?.();
    };
    const onNext = () => {
      carousel.value?.next?.();
    };
    const onGoFirst = () => {
      carousel.value?.goto?.(0);
    };
    return {
      items,
      carousel,
      onPrev,
      onNext,
      onGoFirst,
    };
  },
});
</script>
<style>
.carousel-demo-operate {
  margin-top: 10px;
  display: flex;
  align-items: center;
}
.carousel-demo-operate .devui-btn-host {
  margin-right: 20px;
}
</style>

:::

파라미터 타입 기본값 설명 Demo 링크
arrow-trigger 'hover'|'never'|'always' 'hover' 선택, 전환 화살표 표시 방식 지정 인디케이터 & 전환 화살표
autoplay boolean false 선택, 자동 슬라이드 여부 자동 슬라이드
autoplay-speed number 3000 선택, autoplay와 함께 사용. 자동 슬라이드 속도, 단위 ms 자동 슬라이드
height string '100%' 선택, 슬라이드 컨테이너 높이 기본 사용법
show-dots boolean true 선택, 패널 인디케이터 표시 여부 자동 슬라이드
dot-position 'top'|'bottom' 'bottom' 선택, 패널 인디케이터 위치 인디케이터 & 전환 화살표
dot-trigger 'click'|'hover' 'click' 선택, 인디케이터 슬라이드 트리거 방식 인디케이터 & 전환 화살표
active-index number 0 선택, 초기 활성 카드 인덱스. 0부터 시작, [(active-index)] 양방향 바인딩 지원 기본 사용법
transition-speed number 500 선택, 다음 장으로 전환하는 데 걸리는 시간, 단위 ms 기본 사용법
이벤트 타입 설명 Demo 링크
active-index-change EventEmitter<number> 카드 전환 시 현재 카드 인덱스 반환, 0부터 시작 기본 사용법
메서드 설명 Demo 링크
prev() 이전 카드로 전환 커스텀 조작
next() 다음 카드로 전환 커스텀 조작
goTo(index) 지정 인덱스의 카드로 전환, 인덱스는 0부터 시작 커스텀 조작

더 알아보기 (Learn more)

Carousel로 이미지나 카드를 넘겨가며 보여 줄 수 있어요. 더 자세한 내용은 공식 문서를 참고하세요.