Element Carousel 주마등 의 구체 적 인 실현

본 고 는 Element 공식 문서 에서 기원 되 었 습 니 다.
http://element-cn.eleme.io/#/zh-CN/component/carousel
기초 용법
주마등

<div class="block">
<span class="demonstration">   Hover      </span>
<el-carousel height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
<div class="block">
<span class="demonstration">Click      </span>
<el-carousel trigger="click" height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>

주마등
기초 용법

<template>
 <div class="block">
  <span class="demonstration">   Hover      </span>
  <el-carousel height="150px">
   <el-carousel-item v-for="item in 4" :key="item">
    <h3 class="small">{{ item }}</h3>
   </el-carousel-item>
  </el-carousel>
 </div>
 <div class="block">
  <span class="demonstration">Click      </span>
  <el-carousel trigger="click" height="150px">
   <el-carousel-item v-for="item in 4" :key="item">
    <h3 class="small">{{ item }}</h3>
   </el-carousel-item>
  </el-carousel>
 </div>
</template>

<style>
 .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
 }

 .el-carousel__item:nth-child(2n) {
   background-color: #99a9bf;
 }
 
 .el-carousel__item:nth-child(2n+1) {
   background-color: #d3dce6;
 }
</style>

인디케이터

<template>
 <div class="block">
  <span class="demonstration">   Hover      </span>
  <el-carousel height="150px">
   <el-carousel-item v-for="item in 4" :key="item">
    <h3 class="small">{{ item }}</h3>
   </el-carousel-item>
  </el-carousel>
 </div>
 <div class="block">
  <span class="demonstration">Click      </span>
  <el-carousel trigger="click" height="150px">
   <el-carousel-item v-for="item in 4" :key="item">
    <h3 class="small">{{ item }}</h3>
   </el-carousel-item>
  </el-carousel>
 </div>
</template>

<style>
 .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
 }

 .el-carousel__item:nth-child(2n) {
   background-color: #99a9bf;
 }
 
 .el-carousel__item:nth-child(2n+1) {
   background-color: #d3dce6;
 }
</style>

화살표 전환

<template>
 <div class="block">
  <span class="demonstration">   Hover      </span>
  <el-carousel height="150px">
   <el-carousel-item v-for="item in 4" :key="item">
    <h3 class="small">{{ item }}</h3>
   </el-carousel-item>
  </el-carousel>
 </div>
 <div class="block">
  <span class="demonstration">Click      </span>
  <el-carousel trigger="click" height="150px">
   <el-carousel-item v-for="item in 4" :key="item">
    <h3 class="small">{{ item }}</h3>
   </el-carousel-item>
  </el-carousel>
 </div>
</template>

<style>
 .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
 }

 .el-carousel__item:nth-child(2n) {
   background-color: #99a9bf;
 }
 
 .el-carousel__item:nth-child(2n+1) {
   background-color: #d3dce6;
 }
</style>

카드 화

<template>
 <el-carousel :interval="4000" type="card" height="200px">
  <el-carousel-item v-for="item in 6" :key="item">
   <h3 class="medium">{{ item }}</h3>
  </el-carousel-item>
 </el-carousel>
</template>

<style>
 .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
 }
 
 .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
 }
 
 .el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
 }
</style>

방향.

<template>
 <el-carousel height="200px" direction="vertical" :autoplay="false">
  <el-carousel-item v-for="item in 3" :key="item">
   <h3 class="medium">{{ item }}</h3>
  </el-carousel-item>
 </el-carousel>
</template>

<style>
 .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
 }
 
 .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
 }
 
 .el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
 }
</style>

Carousel Attributes
매개 변수
설명 하 다.
유형
선택 값
기본 값
height
주마등 높이
string
―
―
initial-index
초기 상태 에서 활성 화 된 슬라이드 의 색인,0 부터
number
―
0
trigger
지시기 의 트리거 방식
string
click
―
autoplay
자동 전환 여부
boolean
―
true
interval
자동 으로 전환 하 는 시간 간격,단 위 는 밀리초 입 니 다.
number
―
3000
indicator-position
지시기 의 위치
string
outside/none
―
arrow
화살표 표시 시 기 를 전환 합 니 다.
string
always/hover/never
hover
type
주마등 타 입
string
card
―
Carousel Events
이벤트 이름
설명 하 다.
리 턴 매개 변수
change
슬라이드 쇼 전환 시 시전
현재 활성 화 된 슬라이드 의 인덱스,원본 슬라이드 의 인덱스
Carousel Methods
방법
설명 하 다.
매개 변수
setActiveItem
슬라이드 쇼 수 동 으로 전환
전환 할 슬라이드 의 색인 은 0 부터 시작 합 니 다.또는 해당 el-carousel-item 의 name 속성 값
prev
이전 슬라이드 로 전환
―
next
다음 슬라이드 로 전환
―
Carousel-Item Attributes
매개 변수
설명 하 다.
유형
선택 값
기본 값
name
슬라이드 이름,setActiveItem 의 인자 로 사용 가능
string
―
―
label
이 슬라이드 에 대응 하 는 인디케이터 의 텍스트
string
―
―
Element Carousel 주마등 의 구체 적 인 실현 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 Element Carousel 주마등 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!