mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 09:20:51 +08:00
218 lines
7.5 KiB
Markdown
218 lines
7.5 KiB
Markdown
|
## Carousel
|
||
|
|
|
||
|
|
Presenta una serie de imágenes o textos en un espacio limitado
|
||
|
|
|
||
|
|
### Uso básico
|
||
|
|
|
||
|
|
:::demo Combine `el-carousel` con `el-carousel-item`, para conseguir el carrusel. El contenido de cada diapositiva es completamente personalizable, y sólo tiene que colocarla dentro de la etiqueta `el-carousel-item` . Por defecto, el carrusel cambia cuando el ratón pasa por encima de un indicador. Fije `trigger` para `click`, si lo que se desea es que el carrusel cambie sólo cuando se haga clic en un indicador.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<template>
|
||
|
|
<div class="block">
|
||
|
|
<span class="demonstration">Switch when indicator is hovered (default)</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">Switch when indicator is clicked</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>
|
||
|
|
```
|
||
|
|
:::
|
||
|
|
|
||
|
|
### Indicadores
|
||
|
|
|
||
|
|
Los indicadores de paginación pueden mostrarse fuera del carrusel
|
||
|
|
|
||
|
|
:::demo El atributo `indicator-position` determina dónde se encuentran los indicadores de paginación. Por defecto están dentro del carrusel, y el ajuste de `indicator-position` a `outside` los mueve hacia fuera; en cambio `indicator-position` a `none` los oculta.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<template>
|
||
|
|
<el-carousel indicator-position="outside">
|
||
|
|
<el-carousel-item v-for="item in 4" :key="item">
|
||
|
|
<h3>{{ item }}</h3>
|
||
|
|
</el-carousel-item>
|
||
|
|
</el-carousel>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.el-carousel__item h3 {
|
||
|
|
color: #475669;
|
||
|
|
font-size: 18px;
|
||
|
|
opacity: 0.75;
|
||
|
|
line-height: 300px;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-carousel__item:nth-child(2n) {
|
||
|
|
background-color: #99a9bf;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-carousel__item:nth-child(2n+1) {
|
||
|
|
background-color: #d3dce6;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
```
|
||
|
|
:::
|
||
|
|
|
||
|
|
### Flechas
|
||
|
|
|
||
|
|
Puede definir cuando se visualizan las flechas
|
||
|
|
|
||
|
|
:::demo El atributo `arrow` determina cuándo se visualizan las flechas. Por defecto aparecen cuando el ratón se desplaza sobre el carrusel. Ajuste `arrow` a `always` o `never` para mostrar u ocultar las flechas permanentemente.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<template>
|
||
|
|
<el-carousel :interval="5000" arrow="always">
|
||
|
|
<el-carousel-item v-for="item in 4" :key="item">
|
||
|
|
<h3>{{ item }}</h3>
|
||
|
|
</el-carousel-item>
|
||
|
|
</el-carousel>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.el-carousel__item h3 {
|
||
|
|
color: #475669;
|
||
|
|
font-size: 18px;
|
||
|
|
opacity: 0.75;
|
||
|
|
line-height: 300px;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-carousel__item:nth-child(2n) {
|
||
|
|
background-color: #99a9bf;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-carousel__item:nth-child(2n+1) {
|
||
|
|
background-color: #d3dce6;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
```
|
||
|
|
:::
|
||
|
|
|
||
|
|
### Modo Card
|
||
|
|
|
||
|
|
Cuando una página es suficientemente ancha pero tiene una altura limitada, puede activar el modo `card` para carrusel.
|
||
|
|
|
||
|
|
:::demo Ajuste `type` a `card` para activar el modo tarjeta. Aparte de la apariencia, la mayor diferencia entre el modo tarjeta y el modo común es que al hacer clic en las diapositivas de ambos lados, el carrusel cambia directamente en modo tarjeta.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<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>
|
||
|
|
```
|
||
|
|
:::
|
||
|
|
|
||
|
|
Por defecto, `direction` es `horizontal`. El carousel puede ser mostrado de forma vertical cambiando `direction` a `vertical`.
|
||
|
|
|
||
|
|
:::demo
|
||
|
|
```html
|
||
|
|
<template>
|
||
|
|
<el-carousel height="200px" direction="vertical" :autoplay="false">
|
||
|
|
<el-carousel-item v-for="item in 4" :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>
|
||
|
|
```
|
||
|
|
:::
|
||
|
|
|
||
|
|
### Atributos de Carousel
|
||
|
|
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||
|
|
| ------------------ | -------------------------------------------------- | ------- | ------------------- | ----------- |
|
||
|
|
| height | Alto del carrusel | string | — | — |
|
||
|
|
| initial-index | Indice del slider inicial activo (empieza desde 0) | number | — | 0 |
|
||
|
|
| trigger | Evento que muestra los indicadores | string | hover/click | hover |
|
||
|
|
| autoplay | Si se enlazan automáticamente las diapositivas | boolean | — | true |
|
||
|
|
| interval | Intervalo del auto loop, en milisegundos | number | — | 3000 |
|
||
|
|
| indicator-position | Posición del indicador de paginación | string | outside/none | — |
|
||
|
|
| arrow | Cuando se muestran las flechas | string | always/hover/never | hover |
|
||
|
|
| type | Tipo de carrusel | string | card | — |
|
||
|
|
| loop | Si se muestra cíclicamente | boolean | — | true |
|
||
|
|
| direction | direccion en la que se muestra el contenido | string | horizontal/vertical | horizontal |
|
||
|
|
|
||
|
|
### Eventos de Carousel
|
||
|
|
| Nombre evento | Descripción | Parámetros |
|
||
|
|
| ------------- | ----------------------------------------- | ------------------------------------------------------------ |
|
||
|
|
| change | Se dispara cuando el slider activo cambia | Indice del nuevo slider activo, indice del anterior slider activo. |
|
||
|
|
|
||
|
|
### Metodos de Carousel
|
||
|
|
| Metodos | Descripción | Parámetros |
|
||
|
|
| ------------- | -------------------------- | ------------------------------------------------------------ |
|
||
|
|
| setActiveItem | Cambio manual de slider | indice del slider al que se va a cambiar, empezando por 0; o el `name` del `el-carousel-item` correspondiente |
|
||
|
|
| prev | Cambia al slider anterior | — |
|
||
|
|
| next | Cambia al slider siguiente | — |
|
||
|
|
|
||
|
|
### Atributos de Carousel-Item
|
||
|
|
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||
|
|
| -------- | ---------------------------------------- | ------ | ----------------- | ----------- |
|
||
|
|
| name | Nombre del item que puede ser usado en `setActiveItem` | string | — | — |
|
||
|
|
| label | Texto que se mostrara en el indicador de paginacion correspondiente | string | — | — |
|
||
|
|
|