Como construir um carrossel simples com Vanilla JavaScript (14 linhas de código!)

O humilde carrossel (ou “slider”) é um recurso comum em sites, mas nem sempre é a coisa mais simples de se construir.

Neste tutorial, vamos construir um carrossel muito simples usando JavaScript vanilla. Tão simples, na verdade, que requer menos de 15 linhas de código JavaScript.

Esse tipo de implementação é perfeito para um site básico e também tem alto desempenho, pois permite exibir conteúdo de maneira apresentável sem exigir muito código. Depois de criar esses slides, você pode adicionar o conteúdo que quiser a eles; texto, imagens, vídeo, você escolhe.

Aqui está uma olhada no carrossel finalizado que construiremos – 4 slides coloridos simples:

Vamos começar!

1. Coloque o conteúdo com HTML

Vamos definir a estrutura do nosso slider usando HTML. Vamos colocar alguns slides em um container e alguns botões para controlar o slider para que o layout fique assim:

  
    ‹
  
  
  
    ›
  
  
  

    

    

    

    

  

Definimos nossos slides-container e slides com o ul e li tag respectivamente por motivos de acessibilidade.

2. Estilize o carrossel com CSS

Agora vamos estilizar nosso controle deslizante. Para manter esta demonstração o mais simples possível, vou estilizar os slides apenas com cores de fundo, mas, como mencionado anteriormente, qualquer elemento pode ser colocado no carrossel (imagens, texto, vídeos etc.).

A primeira coisa que faremos é estilizar nosso slider-wrapper, slides-container e slide Aulas.

O recipiente de slides terá overflow:scroll e display:flex propriedades para exibir todos os slides em uma única linha enquanto seu contêiner pai, o wrapper do slider, terá um overflow-hidden propriedade. Isso nos permite rolar pelos slides no contêiner enquanto ainda permanecemos na largura da página.

Também precisaremos substituir o estilo padrão para o ul marcação. E, em seguida, definiremos os slides para a largura e altura total do contêiner de slides.

.slider-wrapper {
  margin: 1rem;
  position: relative;
  overflow: hidden;
}

.slides-container {
  height: calc(100vh - 2rem);
  width: 100%;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: scroll;
  scroll-behavior: smooth;
}

.slide {
  width: 100%;
  height: 100%;
  flex: 1 0 100%;
}

Definimos a altura do recipiente de slides como calc(100vh-2rem) para compensar a margem de 1rem na parte superior e inferior do slider-wrapper.

Permitir rolagem suave

Outra propriedade importante a ser observada é a scroll-behaviour na classe de contêiner de slides. Essa é a propriedade que permite que o contêiner role suavemente para o próximo slide em vez de mover-se instantaneamente.

Assim seria nosso carrossel sem scroll-behaviour: smooth

Barra de rolagem ou sem barra de rolagem?

Opcionalmente, podemos optar por ocultar a barra de rolagem em nosso slidesContainer. A barra de rolagem está presente na demonstração, mas podemos removê-la adicionando:

.slides-container {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

/* WebKit */
.slides-container::-webkit-scrollbar { 
    width: 0;
    height: 0;
}

Estilize os botões do carrossel

Finalmente, vamos estilizar nossos botões de carrossel. Vamos definir um opacity propriedade nos botões para que fiquem ligeiramente transparentes e sólidos ao passar o mouse ou focar:

.slide-arrow {
  position: absolute;
  display: flex;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 4rem;
  background-color: white;
  border: none;
  width: 2rem;
  font-size: 3rem;
  padding: 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 100ms;
}

.slide-arrow:hover,
.slide-arrow:focus {
  opacity: 1;
}

#slide-arrow-prev {
  left: 0;
  padding-left: 0.25rem;
  border-radius: 0 2rem 2rem 0;
}

#slide-arrow-next {
  right: 0;
  padding-left: 0.75rem;
  border-radius: 2rem 0 0 2rem;
}

3. Adicionar funcionalidade de controle deslizante com JavaScript

Hora de colocar o Diversão em funcional! Há duas partes da lógica envolvidas neste controle deslizante:

1. Exibindo o próximo slide quando a seta para frente é clicada
2. Exibindo o slide anterior quando a seta para trás é clicada

Primeiro, pegue todos os elementos que precisamos para o controle deslizante:

const slidesContainer = document.getElementById("slides-container");
const slide = document.querySelector(".slide");
const prevButton = document.getElementById("slide-arrow-prev");
const nextButton = document.getElementById("slide-arrow-next");

Agora que está feito, vamos lidar com a movimentação do controle deslizante. Podemos decidir como o contêiner deslizante se move usando o scrollLeft propriedade.

“OElement.scrollLeft A propriedade obtém ou define o número de pixels em que o conteúdo de um elemento é rolado a partir de sua borda esquerda.”- MDN

Como queremos exibir o próximo slide quando a seta para frente for clicada, isso significa que precisaremos rolar o slidesContainer para a esquerda pela largura de um slide.

nextButton.addEventListener("click", (event) => {
  const slideWidth = slide.clientWidth;
    slidesContainer.scrollLeft += slideWidth;
});

Quebrando o que está acontecendo neste código:

• Adicionamos o ouvinte de evento de clique ao próximo botão
• Quando o botão é clicado, obtemos o valor da largura de um slide
• Aumentamos o scrollLeft propriedade do slidesContainer pelo slideWidth.

Podemos aplicar essa mesma lógica ao botão de seta para trás, mas com um pequeno ajuste:

prevButton.addEventListener("click", () => {
  const slideWidth = slide.clientWidth;
  slidesContainer.scrollLeft -= slideWidth;
});

Com este método, em vez de adicionar ao scrollLeft propriedade, subtraímos dela pela largura de um slide. Isso nos permite retroceder quando a seta para trás é pressionada.

Todo o Código

Juntar todo o código JavaScript nos dá, como prometido, um controle deslizante funcional com menos de 15 linhas de JavaScript.

const slidesContainer = document.getElementById("slides-container");
const slide = document.querySelector(".slide");
const prevButton = document.getElementById("slide-arrow-prev");
const nextButton = document.getElementById("slide-arrow-next");

nextButton.addEventListener("click", () => {
  const slideWidth = slide.clientWidth;
  slidesContainer.scrollLeft += slideWidth;
});

prevButton.addEventListener("click", () => {
  const slideWidth = slide.clientWidth;
  slidesContainer.scrollLeft -= slideWidth;
});

Conclusão

E isso é tudo para o carrossel.

É claro que é possível estender essa implementação para incluir vários recursos, como paginação ou snap-to-slide, mas para os propósitos deste tutorial, vamos parar por aqui. Se você estiver procurando por implementações um pouco mais complicadas, confira este artigo: