Carrusel de testimonios con JavaScript: tutorial y código fuente

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

testimonial-slider/

<!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>Testimonial Slider</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="testimonial-container">
      <img
        src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=880&q=80"
        alt="user-image"
      />
      <p class="text">
        This is simply unbelievable! I would be lost without Apple. The very
        best. Not able to tell you how happy I am with Apple.
      </p>
      <h4 class="username">Cherise G</h4>
    </div>
    <script src="index.js"></script>
  </body>
</html>

Carrusel de testimonios

Carrusel de testimonios

Créalo a partir del código fuente

Practica con proyectos relacionados

Animación de efecto de texto automático

Barra de carga

Estadísticas de perfil

Animación de efecto de texto automático

Barra de carga

Estadísticas de perfil