Carousel

출처: 문서

본문

제한된 공간에서 일련의 이미지나 텍스트를 반복해요.

기본 사용법

el-carousel과 el-carousel-item을 결합하면 캐러셀을 만들 수 있어요. 각 슬라이드의 내용은 완전히 커스터마이즈 가능하며, el-carousel-item 태그 안에 넣으면 돼요. 기본적으로 캐러셀은 마우스가 인디케이터 위에 있을 때 전환돼요. trigger를 click으로 설정하면 인디케이터를 클릭했을 때만 전환돼요.

.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

모션 블러 2.6.0

캐러셀에 생동감과 매끄러움을 더하기 위해 모션 블러를 추가해요. 모션 블러를 활성화하면 캐러셀의 생동감과 매끄러움이 향상돼요. 기본적으로 motion-blur 파라미터는 false로 설정되어 있으며, 이 기능을 활성화하면 시각적으로 매력적인 경험을 제공해요.

.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

인디케이터

인디케이터를 캐러셀 밖에 표시할 수 있어요. indicator-position 속성이 인디케이터의 위치를 결정해요. 기본적으로 캐러셀 안에 있으며, indicator-position을 outside로 설정하면 밖으로 이동하고, none으로 설정하면 인디케이터를 숨겨요.

화살표

화살표가 표시되는 시점을 정의할 수 있어요. arrow 속성이 화살표가 표시되는 시점을 결정해요. 기본적으로 마우스가 캐러셀 위에 있을 때 나타나요. arrow를 always 또는 never로 설정하면 화살표를 영구적으로 표시하거나 숨겨요.

자동 높이

캐러셀의 높이를 auto로 설정하면 캐러셀 항목의 높이에 따라 캐러셀 높이가 자동으로 설정돼요.

.carousel-item {
  color: #475669;
  opacity: 0.75;
  margin: 0;
  text-align: center;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  display: flex;
  align-items: center;
  margin: 0;
  text-align: center;
  height: 100%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

카드 모드

페이지가 충분히 넓지만 높이는 제한되어 있을 때, 캐러셀에 카드 모드를 활성화할 수 있어요. type을 card로 설정하면 카드 모드가 활성화돼요. 외형을 제외하고 카드 모드와 일반 모드의 가장 큰 차이는, 카드 모드에서는 양쪽 슬라이드를 클릭하면 바로 캐러셀이 전환된다는 점이에요.

세로 방향

기본적으로 direction은 horizontal이에요. direction을 vertical로 설정하면 캐러셀을 세로 방향으로 표시해요.

Name Description Type Default
height 캐러셀의 높이 string ''
initial-index 처음 활성 슬라이드의 인덱스(0부터 시작) number 0
trigger 인디케이터 트리거 방식 enum hover
autoplay 슬라이드를 자동으로 반복할지 여부 boolean true
interval 자동 반복 간격(밀리초) number 3000
indicator-position 인디케이터의 위치 enum ''
arrow 화살표가 표시되는 시점 enum hover
type Carousel의 타입 enum ''
card-scale 2.7.8 type이 card일 때 보조 카드의 확대 크기 number 0.83
loop 항목을 반복 표시 boolean true
direction 표시 방향 enum horizontal
pause-on-hover 호버 시 자동 재생 일시정지 boolean true
motion-blur 2.6.0 캐러셀에 생동감과 매끄러움 부여 boolean false
Name Description Type
change 활성 슬라이드가 전환될 때 실행돼요. 두 개의 파라미터가 있는데, 하나는 새 활성 슬라이드의 인덱스, 다른 하나는 이전 활성 슬라이드의 인덱스예요 Function
Name Description Subtags
default 기본 내용을 커스터마이즈해요 Carousel-Item
Method Description Type
activeIndex 2.7.8 활성 슬라이드 인덱스 number
setActiveItem 슬라이드 수동 전환, 전환할 슬라이드의 인덱스(0부터 시작) 또는 해당 el-carousel-item의 이름 Function
prev 이전 슬라이드로 전환 Function
next 다음 슬라이드로 전환 Function
Name Description Type Default
name 항목의 이름, setActiveItem에서 사용 가능 string ''
label 해당 인디케이터의 텍스트 내용 string / number ''
Name Description
default 기본 내용을 커스터마이즈해요

더 알아보기 (Learn more)