AMP
ES
English Deutsch Français العربية Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

amp-carousel

Description

Muestra varios fragmentos de contenido similares en un eje horizontal.

 

Required Scripts

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

Supported Layouts

Carrusel genérico que muestra varios fragmentos de contenido similares en un eje horizontal; es muy flexible y eficaz.

Secuencia de comandos obligatoria <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
Diseños admitidos
  • carousel: fixed, fixed-height y nodisplay
  • slides: fill, fixed, fixed-height, flex-item, nodisplay y responsive
Ejemplos Ejemplos de AMP By Example:

Comportamiento

Cada uno de los elementos secundarios inmediatos de amp-carousel se considera un elemento del propio carrusel. Cada uno de estos nodos también puede tener elementos secundarios HTML arbitrarios.

El carrusel está formado por un número arbitrario de elementos, así como por flechas de navegación opcionales para avanzar o retroceder de un elemento a otro.

El usuario puede desplazarse por los elementos deslizando el dedo, utilizando las teclas de flecha o haciendo clic en una flecha de navegación opcional.

<amp-carousel width="450"
  height="300">
  <amp-img src="/static/inline-examples/images/image1.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="/static/inline-examples/images/image2.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="/static/inline-examples/images/image3.jpg"
    width="450"
    height="300"></amp-img>
</amp-carousel>
Abrir este fragmento en Playground

Avanzar a una diapositiva concreta

Si se configura un método tap:carousel-id.goToSlide(index=N) para el atributo on de un elemento, un carrusel con el ID "carousel-id" se desplazará a la diapositiva index=N si el usuario toca o hace clic en él (la primera diapositiva se encuentra en index=0; la segunda diapositiva, en index=1, etc.).

En el siguiente ejemplo, tenemos un carrusel de tres imágenes con botones de vista previa justo debajo. Cuando un usuario hace clic en uno de los botones, se muestra el elemento de carrusel correspondiente.

<amp-carousel id="carousel-with-preview"
    width="450"
    height="300"
    layout="responsive"
    type="slides">
    <amp-img src="/static/inline-examples/images/image1.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="apples"></amp-img>
    <amp-img src="/static/inline-examples/images/image2.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="lemons"></amp-img>
    <amp-img src="/static/inline-examples/images/image3.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="blueberries"></amp-img>
  </amp-carousel>
  <div class="carousel-preview">
    <button on="tap:carousel-with-preview.goToSlide(index=0)">
      <amp-img src="/static/inline-examples/images/image1.jpg"
        width="60"
        height="40"
        alt="apples"></amp-img>
    </button>
    <button on="tap:carousel-with-preview.goToSlide(index=1)">
      <amp-img src="/static/inline-examples/images/image2.jpg"
        width="60"
        height="40"
        alt="lemons"></amp-img>
    </button>
    <button on="tap:carousel-with-preview.goToSlide(index=2)">
      <amp-img src="/static/inline-examples/images/image3.jpg"
        width="60"
        height="40"
        alt="blueberries"></amp-img>
    </button>
  </div>
Abrir este fragmento en Playground

Atributos

type Especifica la forma en la que se muestran los elementos del carrusel, que puede ser:
  • carousel (predeterminado): se muestran todas las diapositivas y el usuario se puede desplazar por ellas de forma horizontal. Este tipo solo admite los siguientes diseños: fixed, fixed-height y nodisplay.
  • slides: muestra una sola diapositiva a la vez. Este tipo admite los siguientes diseños: fill, fixed, fixed-height, flex-item, nodisplay y responsive.
height (obligatorio) Define la altura del carrusel en píxeles.
controls (opcional) Muestra de forma permanente las flechas para que el usuario pueda desplazarse hacia la izquierda y hacia la derecha por los elementos del carrusel en los dispositivos móviles. De forma predeterminada, las flechas de navegación desaparecen al cabo de unos segundos en estos dispositivos. La visibilidad de las flechas también se puede controlar mediante las opciones de estilo, y se puede utilizar una media query para que se muestren las flechas solo cuando la pantalla tenga determinadas anchuras. En los ordenadores, las flechas se muestran siempre, a menos que solo haya un elemento secundario.
data-next-button-aria-label (opcional) Define el atributo aria-label de amp-carousel-button-next. Si no se especifica ningún valor, aria-label cambia de forma predeterminada al siguiente elemento del carrusel.
data-prev-button-aria-label (opcional) Define el atributo aria-label de amp-carousel-button-prev. Si no se especifica ningún valor, aria-label cambia de forma predeterminada al anterior elemento del carrusel.
data-button-count-format (opcional) Cadena de formato similar a (%s of %s), utilizada como sufijo de la aria-label para amp-carousel-button-next o amp-carousel-button-prev. Proporciona información a los usuarios que utilizan un lector de pantalla sobre su ubicación en el carrusel. Si no se especifica ningún valor, el valor predeterminado es "(%s of %s)".
autoplay (opcional) Avanza a la siguiente diapositiva sin la interacción del usuario.
Si está presente sin un valor:
  • De forma predeterminada, avanza a la siguiente diapositiva en intervalos de 5000 milisegundos (5 segundos). Se puede anular mediante el atributo delay.
  • Añade el atributo loop a amp-carousel si loop aún no está presente.
  • Se necesitan al menos 2 diapositivas para que funcione la reproducción automática.
  • Solo se aplica a los carruseles con type=slides.
Si está presente con un valor:
  • Añade el atributo loop a amp-carousel si loop aún no está presente.
  • Elimina el atributo loop después de que se haya realizado el número de bucles especificado.
delay (opcional) Especifica la duración (en milisegundos) que se tarda en avanzar a la siguiente diapositiva cuando se habilita autoplay. El atributo delay solo se aplica a los carruseles con type=slides.
loop (opcional) Permite al usuario avanzar más allá del primer elemento o del último. Debe haber al menos 3 diapositivas para que se produzca el bucle. El atributo loop solo se aplica a los carruseles con type=slides. Ejemplo: Muestra un carrusel de diapositivas con controles, bucles y reproducción automática retrasada (es decir, con delay). 
<amp-carousel type="slides"
  width="450"
  height="300"
  controls
  loop
  autoplay
  delay="3000"  data-next-button-aria-label="Go to next slide"
  data-previous-button-aria-label="Go to previous slide">
  <amp-img src="/static/inline-examples/images/image1.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="/static/inline-examples/images/image2.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="/static/inline-examples/images/image3.jpg"
    width="450"
    height="300"></amp-img>
</amp-carousel>
Abrir este fragmento en Playground
atributos comunes Este elemento incluye atributos comunes que se aplican a los componentes de AMP.

Estilo

  • Puedes utilizar el selector de elementos de amp-carousel para aplicar un estilo al carrusel.
  • Puedes usar el selector de clases de .amp-carousel-slide para hacer referencia a elementos del carrusel.
  • Los botones de amp-carousel permanecen ocultos cuando están inhabilitados.
  • De forma predeterminada, .amp-carousel-button utiliza un SVG insertado como imagen de fondo de los botones. Puedes anular esta opción con tu propio SVG o tu propia imagen, como en el siguiente ejemplo.

Ejemplo: SVG insertado predeterminado de .amp-carousel-button

.amp-carousel-button-prev {
  left: 16px;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z" fill="#fff" /></svg>');
}

Ejemplo: Se anula el SVG insertado predeterminado de .amp-carousel-button

.amp-carousel-button-prev {
  left: 5%;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M11.56 5.56L10.5 4.5 6 9l4.5 4.5 1.06-1.06L8.12 9z" fill="#fff" /></svg>');
}

Validación

Consulta las reglas de amp-carousel en la especificación de la herramienta de validación de AMP.

¿Necesita ayuda adicional?

¿Ha leído este documento una docena de veces pero realmente no responde todas sus preguntas? Quizás otras personas piensen lo mismo: póngase en contacto con ellas en Stack Overflow.

Ir a Stack Overflow
¿Encontró un error o considera que falta una función?

¡El proyecto AMP alienta profundamente su participación y contribuciones! Esperamos que se convierta en un miembro permanente de nuestra comunidad de código abierto, pero también agradecemos las contribuciones esporádicas sobre los temas que le apasionan especialmente.

Ir a GitHub