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

O que a página precisa esconder

Um carrossel mostra uma imagem por vez no mesmo retângulo. As outras continuam no HTML, alinhadas lado a lado, mas uma máscara corta tudo o que passa da largura visível. O visitante não troca de página: um clique só desliza essa faixa.

Três peças resolvem isso. O HTML guarda a faixa e os botões. O CSS define a largura de cada slide e a animação. O JavaScript muda um número, o índice da foto atual, e aplica esse deslocamento.

Passo a passo

Monte nesta ordem. Se o botão não mover nada, o erro quase sempre está no seletor ou na largura do slide, não na conta do índice.

1. Crie um contêiner com overflow escondido e, dentro dele, uma trilha flexível com um bloco por foto.
2. Faça cada slide ocupar 100% da largura do contêiner e a imagem preencher o slide sem estourar a altura.
3. Coloque dois botões, anterior e próximo, por cima do contêiner.
4. No JavaScript, guarde o índice em zero e uma função que aplica translateX negativo vezes 100% vezes o índice.
5. No botão próximo, some 1 e volte a zero quando passar da última foto. No anterior, faça o caminho inverso.
6. Confira no navegador: três cliques para a direita devem voltar à primeira foto, sem barra de rolagem horizontal na página.

<div class='carousel'>
  <div class='carousel-track'>
    <div class='carousel-slide'><img src='foto-1.jpg' alt='Primeira foto'></div>
    <div class='carousel-slide'><img src='foto-2.jpg' alt='Segunda foto'></div>
  </div>
  <button type='button' class='prev'>Anterior</button>
  <button type='button' class='next'>Próximo</button>
</div>

.carousel { position: relative; overflow: hidden; max-width: 640px; }
.carousel-track { display: flex; transition: transform .4s ease; }
.carousel-slide { min-width: 100%; }
.carousel-slide img { width: 100%; display: block; }

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();
});

Erros comuns

O deslizamento quebra quando a largura do slide não é exatamente a largura visível, ou quando o script roda antes do HTML existir. Para complementar essa implementação em produção, vale conferir também nossas análises técnicas sobre Design System com CSS puro: Como criar cards e sidebars premium e Como criar e assinar commits usando chaves GPG ou chaves SSH para autenticidade.

• Coloque o script no final do body ou espere DOMContentLoaded.
• Não use imagens com largura fixa em pixels dentro do slide.
• Deixe alt em cada imagem. O botão sozinho não descreve a foto.
• Indicadores e autoplay só entram depois que o clique manual já troca o slide.

Conclusão

O carrossel é uma faixa que anda em passos de 100%. O HTML lista as fotos, o CSS esconde o excedente e o JavaScript só atualiza o índice.

Com esse núcleo estável, bolinhas e avanço automático são um contador em cima da mesma função update.