element-plus/website/docs/es/carousel.md
kooriookami 67ea05eb2c
feat(carousel): add pause-on-hover prop ()
* feat(carousel): add pause-on-hover prop

* feat: add jest
2021-02-08 16:23:48 +08:00

7.6 KiB

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.

<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.

<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.

<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.

<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

<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>

:::

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
pause-on-hover pause autoplay when hover boolean - true
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 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
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