En este artículo, aprenderemos cómo implementar una función de galería de imágenes utilizando el complemento JavaScript Gallery . Este complemento es muy liviano y de naturaleza receptiva, lo que ayuda a los desarrolladores a administrar galerías de fotos.
Nota: descargue el complemento Galería de JavaScript en la carpeta de trabajo e incluya los archivos necesarios en la sección principal de su código HTML.
<link href=”style.css” rel=”stylesheet” type=”text/css”/>
<script src=”app.js”></script>
Ejemplo: El siguiente ejemplo muestra una galería de imágenes utilizando el complemento Galería de JavaScript. Cada imagen de la galería se puede deslizar fácilmente. El desarrollador debe crear una carpeta de «imágenes» en la carpeta de trabajo en la que se almacenan los archivos de imágenes «JPG» o «PNG». Se pueden agregar más imágenes más adelante en esta carpeta.
HTML
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content=
"initial-scale=1, width=device-width">
<head>
<link rel="stylesheet" href="style.css">
<script src="app.js" type="module"></script>
<title>JavaScript Gallery Plugin</title>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green">GeeksForGeeks</h2>
<b>JavaScript Gallery Plugin</b>
<template>
<li>
<img alt="" loading="lazy">
</li>
</template>
</body>
</html>
images.js Este archivo JavaScript se usa en el código HTML anterior que contiene todos los nombres de las imágenes como se muestra a continuación.
export default [ "background1.jpg", "background2.jpg", "background3.jpg", "geeksimage1.png", "geeksimage2.png", "geeksimage3.png", "gfg1.png" ];
Producción:
Si el usuario desea agregar más imágenes a la galería, debe agregar el nuevo nombre de la imagen como se muestra a continuación en el código. Por ejemplo “gfg2.jpg” es el archivo agregado en la carpeta “images” y en el siguiente código.
export default [ "background1.jpg", "background2.jpg", "background3.jpg", "geeksimage1.png", "geeksimage2.png", "geeksimage3.png", "gfg1.png", "gfg2.jpg" ];
Salida: La siguiente salida muestra la naturaleza receptiva del complemento.
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA