El componente amp-carousel se utiliza para crear un carrusel de imagen/contenido en AMP HTML a lo largo del eje horizontal. Un carrusel es una presentación de diapositivas de imágenes a través de una serie de imágenes.
Scripts requeridos: importar el componente amp-carousel en el encabezado.
HTML
<script async custom-element="amp-carousel" src= "https://cdn.ampproject.org/v0/amp-carousel-0.1.js"> </script>
Atributos:
- type: Especifica el tipo de carrusel. De forma predeterminada, el tipo se establece como carrusel (todas las diapositivas se desplazan horizontalmente, las diapositivas podrían tener un CSS diferente aquí). También se puede configurar como diapositiva (se muestra una sola diapositiva a la vez).
- control: Muestra las flechas izquierda y derecha para la navegación del usuario.
- reproducción automática: cuando usamos este atributo, mueve el carrusel por sí solo.
- bucle: Usando el atributo de bucle se crea un bucle, es decir, hay un control derecho en la última diapositiva y un control izquierdo en la primera.
- Demora: la duración de la visualización de la siguiente diapositiva se establece de forma predeterminada en 5000 ms y la demora no puede ser inferior a 1000 ms.
- diapositiva: se utiliza para especificar qué diapositiva debe ir primero.
Ejemplo 1: Usar type=”slides” para mostrar una lista de imágenes como diapositivas.
HTML
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>amp-carousel</title>
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<!-- Import the carousel component in the header. -->
<script async custom-element="amp-carousel"
src=
"https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
</script>
<link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-carousel/index.html">
<meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
animation: -amp-start 8s
steps(1, end) 0s 1 normal both
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</style>
</noscript>
</head>
<body>
<amp-carousel width="400" height="300"
layout="responsive" type="slides">
<amp-img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"
width="400" height="300"
layout="responsive">
</amp-img>
<amp-img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190918234528/colorize1.png"
width="400" height="300"
layout="responsive">
</amp-img>
<amp-img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190918234815/colorize2.png"
width="400" height="300"
layout="responsive">
</amp-img>
</amp-carousel>
</body>
</html>
Producción:
Ejemplo 2: uso del atributo de reproducción automática con un retraso de 3000 ms.
HTML
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>amp-carousel</title>
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<!-- Import the carousel component
in the header. -->
<script async custom-element="amp-carousel"
src=
"https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
</script>
<link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-carousel/index.html">
<meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
animation: -amp-start 8s
steps(1, end) 0s 1 normal both
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</style>
</noscript>
</head>
<body>
<amp-carousel width="400" height="300"
layout="responsive" type="slides"
autoplay delay="3000">
<amp-img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"
width="400" height="300"
layout="responsive">
</amp-img>
<amp-img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190918234528/colorize1.png"
width="400" height="300"
layout="responsive">
</amp-img>
<amp-img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190918234815/colorize2.png"
width="400" height="300"
layout="responsive">
</amp-img>
</amp-carousel>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por somsagar2019 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA