Marcio Cunha
Voltar ao Blog
Frontend

Como criar um carrossel de imagens com HTML, CSS e JavaScript

Criar um carrossel de imagens interativo do zero é uma excelente forma de dominar a base da web moderna. Vamos usar HTML, CSS e JavaScript para montar um slider responsivo e funcional sem depender de bibliotecas externas.

Marcio Cunha•6 min
Também disponível em:EnglishEspañol
Resumo
  • A estrutura HTML utiliza uma caixa principal que esconde o excesso de conteúdo e alinha as imagens lado a lado.
  • O estilo CSS aplica uma transição suave para que a troca de imagens aconteça de forma fluida e animada.
  • O código em JavaScript controla a posição atual das imagens multiplicando o índice por cem por cento.
  • O operador de resto matemática garante que o carrossel volte ao início ou vá para o fim de forma infinita.
  • Melhorias futuras como autoplay e suporte a toque na tela podem ser adicionadas sobre essa mesma base sólida.

O que é um carrossel?

Um carrossel, também conhecido como slider, é um componente que mostra uma sequência de imagens ou conteúdos no mesmo espaço da tela, permitindo navegar entre os itens com botões de anterior e próximo.

Passo 1: Estrutura HTML


  

    

      Imagem 1
    

    

      Imagem 2
    

    

      Imagem 3

Passo 2: Estilo CSS

.carousel-container { position: relative; overflow: hidden; max-width: 600px; }
.carousel-track { display: flex; transition: transform .4s ease; }
.carousel-slide { min-width: 100%; }
.carousel-slide img { width: 100%; display: block; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); }
.prev { left: 10px; }
.next { right: 10px; }

Passo 3: JavaScript

const track = document.querySelector('.carousel-track');
const slides = document.querySelectorAll('.carousel-slide');
let index = 0;

function update() {
  track.style.transform = 'translateX(' + (-index * 100) + '%)';
}

document.querySelector('.next').addEventListener('click', () => {
  index = (index + 1) % slides.length;
  update();
});

document.querySelector('.prev').addEventListener('click', () => {
  index = (index - 1 + slides.length) % slides.length;
  update();
});

Próximos passos

  • Indicadores (bolinhas)
  • Autoplay
  • Suporte a swipe