O que é um carrossel?

Um carrossel (slider) mostra uma sequência de imagens ou conteúdos no mesmo espaço, permitindo navegar entre itens com botões de anterior e próximo.

Passo 1: Estrutura HTML

<div class="carousel-container">
  <div class="carousel-track">
    <div class="carousel-slide">
      <img src="https://placehold.co/600x300/3498db/ffffff?text=Imagem+1" alt="Imagem 1" />
    </div>
    <div class="carousel-slide">
      <img src="https://placehold.co/600x300/2ecc71/ffffff?text=Imagem+2" alt="Imagem 2" />
    </div>
    <div class="carousel-slide">
      <img src="https://placehold.co/600x300/e74c3c/ffffff?text=Imagem+3" alt="Imagem 3" />
    </div>
  </div>
  <button class="carousel-btn prev">&#10094;</button>
  <button class="carousel-btn next">&#10095;</button>
</div>

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