Matricule-se
Voltar para o blog
Full Stack

Criar Carrossel de Imagens com HTML, CSS e JavaScript

Pedro Surreaux

Aprenda criar um carrossel de imagens com HTML, CSS e JavaScript. Veja código completo, passo a passo e copie pronto para usar no seu site.

Um carrossel de imagens pode ser feito só com HTML, CSS e JavaScript puro: as imagens ficam numa div .slides em flexbox, o CSS desloca o conjunto com transform: translateX() e uma transição suave, e o JavaScript controla o índice atual nos botões e no setInterval, que troca de slide a cada 3 segundos.

Para baixar os arquivos utilizados na aula, preencha:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

Introdução

Você já pensou em deixar seu site mais moderno e dinâmico? Um carrossel de imagens é uma forma simples e poderosa de destacar conteúdos visuais. Com HTML, CSS e JavaScript, você consegue criar esse recurso de forma rápida e totalmente personalizada.

Neste guia, você vai aprender a criar um carrossel de imagens com HTML CSS JavaScript completo. O código já está pronto para você copiar e usar. Além disso, verá como adicionar botões de navegação, transições suaves e até um sistema automático de rotação das imagens.

No final, você terá um componente funcional para aplicar em qualquer projeto, sem precisar de bibliotecas externas.

Estrutura Inicial do Projeto

O primeiro passo é organizar os arquivos. Você pode separar em três documentos (index.html, style.css e script.js) ou unir tudo em um único arquivo HTML.

Estrutura básica do HTML

HTML
<div class="carrossel">
  <div class="slides">
    <img src="imagens/img1.jpg" alt="Carrossel HTML CSS Imagem 1">
    <img src="imagens/img2.jpg" alt="Carrossel HTML CSS Imagem 2">
    <img src="imagens/img3.jpg" alt="Carrossel HTML CSS Imagem 3">
  </div>
  <button class="esquerda">&#10094;</button>
  <button class="direita">&#10095;</button>
</div>
  • A div.slides contém as imagens.
  • Os botões servem para navegar para frente e para trás.
Estrutura HTML do carrossel de imagens no VS Code

Estilos com CSS

Agora, vamos centralizar o carrossel, definir dimensões e estilizar botões.

Reset inicial

CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Centralizando o carrossel

CSS
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

Carrossel estilizado

CSS
.carrossel {
  max-width: 400px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.25);
}
.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}
.slides img {
  max-width: 100%;
  object-fit: contain;
  display: block;
}

Botões de navegação

CSS
button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: none;
  background: black;
  color: white;
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
button:hover {
  background-color: rgba(0,0,0,0.75);
}
.esquerda { left: 10px; }
.direita { right: 10px; }
Carrossel de imagens renderizado no navegador

Funcionalidades com JavaScript

O JavaScript faz o carrossel ganhar vida. Ele controla a transição entre as imagens manualmente e automaticamente.

Seleção dos elementos

JavaScript
const slides = document.querySelector('.slides');
const imagens = document.querySelectorAll('.slides img');
const btnEsq = document.querySelector('.esquerda');
const btnDir = document.querySelector('.direita');

let index = 0;

Exibir imagem correta

JavaScript
function mostrarSlide() {
  slides.style.transform = `translateX(${-index * 100}%)`;
}

Botões de navegação

JavaScript
btnDir.addEventListener('click', () => {
  index = (index + 1) % imagens.length;
  mostrarSlide();
});

btnEsq.addEventListener('click', () => {
  index = (index - 1 + imagens.length) % imagens.length;
  mostrarSlide();
});

Carrossel automático

JavaScript
setInterval(() => {
  index = (index + 1) % imagens.length;
  mostrarSlide();
}, 3000);
Código JavaScript do carrossel de imagens no editor
Ícone Full StackFull Stack Impressionador

Essa é uma trilha de especialização que vai te tornar um verdadeiro Desenvolvedor Web Full Stack, dominando todas as principais tecnologias usadas tanto para o Front End quanto para o Backend e ainda para Mobile, construindo projetos práticos e exercícios aplicados à realidade das empresas. Tudo o que você precisa para se tornar um Desenvolvedor Full Stack em um único lugar.

Começar agoraSeta para a direita
Fundo Full StackTelas Full Stack
Luz Full Stack

Resultado Final

Após unir HTML, CSS e JavaScript, o resultado é um carrossel funcional:

  • Troca automática de imagens a cada 3 segundos.
  • Botões de navegação para controle manual.
  • Transições suaves entre os slides.

Esse carrossel pode ser adaptado para portfólios, e-commerces ou páginas institucionais.

Leia também:

Fontes externas:

Perguntas frequentes

1. Como o carrossel troca as imagens sem plugin?

As imagens ficam lado a lado dentro da div .slides, que usa display flex. O JavaScript aplica transform: translateX() com deslocamento proporcional ao índice atual, e a transition de 0.5s definida no CSS anima o movimento. Nenhuma biblioteca externa é necessária — o efeito inteiro sai com HTML, CSS e JavaScript puro.

2. Como pausar o carrossel automático quando o mouse está sobre ele?

Guarde o setInterval numa variável, como let timer = setInterval(mostrarSlide, 3000), e adicione dois eventos ao carrossel: mouseenter chamando clearInterval(timer) para pausar, e mouseleave recriando o intervalo para retomar a rotação. É um ajuste de poucas linhas que melhora a experiência de quem parou para ver uma imagem.

3. Preciso saber muito JavaScript para criar esse carrossel?

O carrossel completo usa cerca de vinte linhas de JavaScript com três recursos básicos: querySelector para selecionar os elementos, addEventListener para os cliques nos botões e setInterval para a troca automática. Se você já conhece variáveis e funções, consegue montar o código e adaptá-lo ao seu projeto sem complicação.

4. Onde vale a pena usar um carrossel de imagens?

Em portfólios, vitrines de e-commerce e páginas institucionais, quando vários conteúdos visuais disputam o mesmo espaço da tela. Prefira poucas imagens, comprimidas e do mesmo tamanho, e mantenha os botões de navegação visíveis para o visitante controlar o ritmo — a troca automática segue rodando como complemento.

Conclusão

Criar um carrossel de imagens com HTML CSS JavaScript é mais fácil do que parece. Com alguns blocos de código, você adiciona dinamismo ao site e melhora a experiência do visitante.

👉 Quer dominar de vez HTML, CSS e JavaScript? Acesse agora o curso completo de desenvolvimento web.

FAQ

1. Posso usar esse carrossel em qualquer site?
Sim. Basta copiar o código e ajustar os caminhos das imagens.

2. O carrossel funciona em celulares?
Funciona em dispositivos móveis, mas você pode ajustar o CSS para garantir total responsividade.

3. É possível adicionar mais imagens?
Sim. Basta incluir novas tags <img> dentro da div.slides. O JavaScript já trata a quantidade automaticamente.

4. Preciso de bibliotecas externas como jQuery?
Não. Todo o código é feito com JavaScript puro.

5. Como mudar a velocidade da troca automática?
Altere o valor 3000 no setInterval. Esse número representa milissegundos (3000 = 3 segundos).

Hashtag Treinamentos

Para acessar publicações de JavaScript, clique aqui!

Quer aprender mais sobre JavaScript com um minicurso básico gratuito?

Posts mais recentes de HTML e CSS

Posts mais recentes da Hashtag Treinamentos

Pedro Surreaux

Autor do artigo

Pedro Surreaux

Redator de Publicações

Redator de conteúdo na Hashtag Treinamentos. Produzo textos didáticos sobre tecnologia, buscando informar e engajar o público de forma acessível e descomplicada.

Ver mais posts