🎞️ Como criar um slideshow automático

Vamos criar um slideshow que troca de imagem a cada 3 segundos usando JavaScript!

  • 🏖 Sites de turismo: Apresentação automática de pontos turísticos recomendados
  • 🏪 Apresentação de produtos: Troca automática de banners de novos produtos ou itens em promoção
  • 👶 Galeria de fotos: Reprodução automática de fotos de eventos e lembranças

💡 Como funciona o slideshow

No código JavaScript abaixo, os caminhos das imagens são armazenados em um array,
e usamos setInterval() para alternar as imagens em sequência a cada poucos segundos.
A primeira imagem é exibida inicialmente, e após o carregamento da página, o slideshow começa automaticamente — essa é a estrutura básica de um slideshow automático.

<script>
const images = [
  "/assets/images/sample1.jpg",
  "/assets/images/sample2.jpg",
  "/assets/images/sample3.jpg"
  // Caminho absoluto para servidor (exemplo):
  // "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); // Troca a cada 3 segundos
</script>
👇 Resultado 👇
Imagem do slideshow

📏 Como lidar com imagens de tamanhos diferentes

Quando as imagens são verticais ou quadradas, a diferença de altura pode fazer com que
o layout da página (especialmente o texto abaixo) se mova.

Nesses casos, defina uma height fixa e use object-fit para cortar ou ajustar o conteúdo da imagem.

💡 Método 1: Cortar e padronizar a altura (object-fit: cover)

  • 📸 Corta e amplia com base no centro da imagem
  • ✨ Visual uniforme e bonito
  • 🪄 Estilo similar ao Instagram
<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>Demonstração de slideshow automático</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>🎞️ Demonstração de slideshow automático</h1>
    <img id="slideshow" class="slideshow" src="/assets/images/sample1.jpg" alt="Imagem do slideshow">
  </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); // Troca a cada 3 segundos
  </script>
</body>
</html>
👇 Resultado 👇
GIF de um cachorro correndo

💡 Método 2: Adicionar espaço em cima e embaixo para exibir a imagem inteira (object-fit: contain)

  • 🖼 Mostra a imagem completa até as bordas
  • ⬜ Altura nivelada com espaços vazios
  • 🔲 Útil para exibir como miniaturas

Mesmo com diferentes alturas, cada imagem é exibida por completo

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>Slideshow (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>🎞️ Demonstração de Slideshow (object-fit: contain)</h1>
    <img id="slideshow-contain" class="slideshow" src="/assets/images/sample1.jpg" alt="Imagem do slideshow">
  </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); // Trocar a imagem a cada 3 segundos
  </script>
</body>
</html>
👇 Resultado 👇
GIF de cachorro correndo

🖐 Melhore a UX com troca automática + manual

Além de exibir o slideshow automaticamente, adicionar controle manual permite ao usuário navegar no seu próprio ritmo.

Adicione botões como abaixo para melhorar a usabilidade:

  • ◀️ Botão de voltar para imagem anterior
  • ▶️ Botão de próxima imagem manual
  • ⏸ Função de pausar torna a experiência completa

Com isso, o usuário pode aproveitar o fluxo automático e ainda controlar o slideshow quando quiser.
Em vitrines de produtos ou galerias de fotos, o controle manual atende ao desejo de "ver com mais detalhes".

Use clearInterval() e setInterval() do JavaScript para implementar pausa e retomada com facilidade.
Combine reprodução automática com interação do usuário para criar uma UI de slideshow mais refinada!