🎞️ Cómo crear una presentación de diapositivas automática

¡Vamos a crear una presentación de diapositivas con JavaScript que cambie las imágenes cada 3 segundos!

🏖 Sitios de turismo y viajes: muestra automáticamente lugares recomendados
🏪 Promoción de productos: cambia automáticamente banners de nuevos productos o promociones
👶 Galería de fotos: reproducción automática de fotos de eventos o recuerdos

💡 Cómo funciona la animación

El siguiente código JavaScript agrupa las rutas de las imágenes en un arreglo,
y utiliza setInterval() para cambiarlas en orden cada pocos segundos.
Inicialmente se muestra una sola imagen, pero tras cargar la página, el sistema avanza automáticamente a la siguiente —estructura básica de un slideshow automático.

<script>
const images = [
  "/assets/images/sample1.jpg",
  "/assets/images/sample2.jpg",
  "/assets/images/sample3.jpg"
  // Ruta absoluta para el servidor (ejemplo):
  // "https://yourdomain.com/assets/images/sample1.jpg"
];
let currentIndex = 0;

function showNextImage() {
  currentIndex = (currentIndex + 1) % images.length;
  document.getElementById("slideshow").src = images[currentIndex];
}

setInterval(showNextImage, 3000); // Cambia cada 3 segundos
</script>

👇 Así se ve 👇

📏 Cómo manejar imágenes de distintos tamaños

Cuando las imágenes tienen diferentes proporciones (verticales, cuadradas, etc.), el diseño general puede verse alterado por las variaciones de altura.

En estos casos, puedes fijar la propiedad height y utilizar object-fit para recortar o rellenar el espacio.

💡 Método 1: Recortar para igualar la altura (object-fit: `cover`)

📸 Hace zoom y recorta desde el centro
✨ Apariencia uniforme y limpia
🪄 Estilo similar a Instagram

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Demostración de presentación automática</title>
  <style>
    .slideshow {
      width: 100%;
      height: 400px;
      object-fit: cover;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🎞️ Demostración de presentación automática</h1>
    <img id="slideshow" class="slideshow" src="/assets/images/sample1.jpg" alt="Imagen de presentación">
  </div>

  <script>
    const images = [
      "/assets/images/sample1.jpg",
      "/assets/images/sample2.jpg",
      "/assets/images/sample3.jpg"
    ];
    let currentIndex = 0;

    function showNextImage() {
      currentIndex = (currentIndex + 1) % images.length;
      document.getElementById("slideshow").src = images[currentIndex];
    }

    setInterval(showNextImage, 3000); // Cambiar cada 3 segundos
  </script>
</body>
</html>

👇 Resultado 👇

💡 Método 2: Agregar espacio superior e inferior para mostrar toda la imagen (object-fit: `contain`)

🖼 Muestra toda la imagen de borde a borde
⬜ Alinea la altura con espacio vacío
🔲 Útil si quieres mostrarlo como una miniatura

Incluso si las imágenes tienen diferentes alturas, se muestra la foto completa de cada una.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Presentación (contain)</title>
  <style>
    .slideshow {
      width: 100%;
      height: 400px;
      object-fit: contain;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🎞️ Presentación (object-fit: contain)</h1>
    <img id="slideshow-contain" class="slideshow" src="/assets/images/sample1.jpg" alt="Imagen de presentación">
  </div>

  <script>
    const images = [
      "/assets/images/sample1.jpg",
      "/assets/images/sample2.jpg",
      "/assets/images/sample3.jpg"
    ];
    let currentIndex = 0;

    function showNextImage() {
      currentIndex = (currentIndex + 1) % images.length;
      document.getElementById("slideshow-contain").src = images[currentIndex];
    }

    setInterval(showNextImage, 3000); // Cambiar cada 3 segundos
  </script>
</body>
</html>

👇Así es como se ve👇

🖐 Mejora la UX con control híbrido (automático + manual)

En lugar de sólo reproducir automáticamente la presentación, añadir navegación manual permite a los usuarios controlar el momento—una UI más flexible.

Al agregar botones como los siguientes, puedes mejorar mucho la usabilidad:

◀️ Botón Anterior para ir a la imagen previa
▶️ Botón Siguiente para saltar manualmente
⏸ Función de Pausa sería ideal

Esto permite que los usuarios disfruten del auto-play mientras interactúan a su propio ritmo.
Especialmente en presentaciones de productos o galerías, el control manual responde a la necesidad de “ver más detenidamente”.

Puedes implementar fácilmente la lógica de pausa/reanudar usando clearInterval() y setInterval() de JavaScript.
¡Combina reproducción automática y controles manuales para crear una UI de presentación más sofisticada!