El carrusel amp se usa para crear un carrusel de imágenes en una página HTML de AMP. En AMP HTML, también es posible agregar un efecto de caja de luz a un amp-carousel usando amp-lightbox-gallery dado que amp-carousel solo contiene imágenes.
Script requerido: Importación del 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>
Importación del componente amp-lightbox-gallery al encabezado
HTML
<script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"> </script>
Ejemplo:
HTML
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-lightbox-gallery/index.html">
<meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<script async custom-element="amp-carousel"
src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
</script>
<title>Google AMP amp-lightbox-gallery</title>
<!-- Import the amp-lightbox-gallery
component in the header. -->
<script async custom-element="amp-lightbox-gallery"
src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js">
</script>
<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>
<style amp-custom>
:root {
--color-primary: #005AF0;
--color-text-light: #fff;
--space-1: .5rem;
--space-2: 1rem;
}
</style>
</head>
<body>
<amp-carousel lightbox width="1600"
height="1300" layout="responsive"
type="slides">
<amp-img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201027070147/gg.jpg"
width="200"
height="100">
</amp-img>
<amp-img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png"
width="200" height="100">
</amp-img>
<amp-img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201027070147/gg.jpg"
width="200"
height="100">
</amp-img>
</amp-carousel>
</body>
</html>
Producción:
salida de código
Al hacer click en la imagen se ve la siguiente vista
cuando hacemos clic en la opción de galería superior izquierda, se ve la siguiente vista
Publicación traducida automáticamente
Artículo escrito por somsagar2019 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA