Tutorial de proyecto JavaScript de galería de imágenes giratorias

Archivos completos del proyecto

Créalo a partir del código fuente

Crea los archivos del proyecto, copia el código y abre el archivo HTML en tu navegador.

1Crea 3 archivos
→
2Copia el código
→
3Ejecuta index.html

Antes de ejecutarlo

Mantén todos los archivos del proyecto juntos en la misma carpeta.

Estructura del proyecto

rotating-image-gallery/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rotating Image Gallery</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="image-container">
      <span style="--i: 1">
        <img src="https://picsum.photos/id/237/300/200" />
      </span>
      <span style="--i: 2">
        <img src="https://picsum.photos/id/23/300/200" />
      </span>
      <span style="--i: 3">
        <img src="https://picsum.photos/id/48/300/200" />
      </span>
      <span style="--i: 4">
        <img src="https://picsum.photos/id/12/300/200" />
      </span>
      <span style="--i: 5">
        <img src="https://picsum.photos/id/59/300/200" />
      </span>
      <span style="--i: 6">
        <img src="https://picsum.photos/id/160/300/200" />
      </span>
      <span style="--i: 7">
        <img src="https://picsum.photos/id/370/300/200" />
      </span>
      <span style="--i: 8">
        <img src="https://picsum.photos/id/478/300/200" />
      </span>
    </div>
    <div class="btn-container">
      <button class="btn" id="prev">Prev</button>
      <button class="btn" id="next">Next</button>
    </div>
    <script src="index.js"></script>
  </body>
</html>

Galería de imágenes giratorias

Galería de imágenes giratorias

Créalo a partir del código fuente

Practica con proyectos relacionados

Control deslizante de imagen

Animación de efecto de texto automático

Animación del rastro del corazón

Control deslizante de imagen

Animación de efecto de texto automático

Animación del rastro del corazón