Slideshow apenas com CSS

Olá, Web Developers!

Hoje vou mostrar como criar um slideshow bem simples apenas com CSS.

A estrutura dos Slides

Primeiro vamos montar nossos slides. Como teremos vários, vou usar a tag ul. Então, cada li será um slide. Dentro do li poderemos ter o conteúdo que quisermos.

<ul class="slides-list" >
    <li class="slide" >
      <img src="https://picsum.photos/300/300?image=8" />
    </li>
    <li class="slide" >
      <img src="https://picsum.photos/300/300?image=0" />
    </li>
    <li class="slide" >
      <img src="https://picsum.photos/300/300?image=6" />
    </li>
    <li class="slide" >
      <img src="https://picsum.photos/300/300?image=1" />
    </li>
</ul>

Estilização básica dos slides

Agora nós iremos fazer uma estilização bem simples na lista de nossos slides.

.slides-list{
  /*remove os estilos da lista*/
  list-style-type: none;
  margin: 10px 0;
  padding: 0;
  
  /* 
	deixa todos os itens da lista
	na horizontal e todos com a
	mesma largura
  */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

Exibindo um slide de cada vez

Agora temos um slide do lado do outro. Mas temos que fazer com que apareça apenas um de cada vez. Bom, isso é muito simples: basta que cada slide (li) preencha 100% da largura disponível, certo?

Com o CSS Grid nós já fizemos com que todos os li possuam o mesmo tamanho e ocupem todo o espaço disponível. Então temos que fazer com que o ul seja maior para que cada li ocupe 100% da largura do espaço disponível.

Se temos quatro slides (li), e cada um precisa ocupar 100% do espaço disponível, nosso ul precisa ter um tamanho de 400%.

Poderíamos fazer da seguinte maneira:

.slides-list{
	...
	width: 400%;
	...
}

Mas isso vai deixar o nosso código fixo. Vamos aproveitar que hoje em dia o CSS aceita variáveis!

.slides-list{
	--total-items: 4;
	...
	width: calc(var(--total-items) * 100%);
	...
}

Usamos uma variável do CSS para armazenar o total de itens em nosso Slideshow, e passamos essa variável para a função calc(). Assim podemos mudar facilmente o total de itens dos nossos slides.

Agora conseguimos ter apenas um único slide na tela de cada vez. Mas por termos um elemento muito longo, apareceu uma barra de rolagem na tela. Não é isso que queremos em um Slideshow.

Vamos então colocar a nossa lista ul dentro de um contêiner, e vamos indicar por CSS que esse contêiner não terá barra de rolagem. Desse jeito o que estiver além das dimensões do contêiner ficará escondido.

<div class="slide-show" >
  <ul class="slides-list" >
    <li class="slide" >
      <img src="https://picsum.photos/300/300?image=8" />
    </li>
    <li class="slide" >
      <img src="https://picsum.photos/300/300?image=0" />
    </li>
    <li class="slide" >
      <img src="https://picsum.photos/300/300?image=6" />
    </li>
    <li class="slide" >
      <img src="https://picsum.photos/300/300?image=1" />
    </li>
  </ul>
</div>

.slide-show{
  overflow: hidden;
}

Escolhendo qual slide será exibido

Agora que conseguimos deixar apenas um slide na tela, ficamos apenas com o primeiro slide preso na tela. Como podemos então indicar que queremos exibir o segundo, terceiro, etc?

Isso também é simples. Podemos pegar o ul e movê-lo com a propriedade left.

.slides-list{
  ...
  position: relative;
  left: 0%;
  ...
}

Sabemos que cada li possui um tamanho de 100%, certo? Então para exibir o primeiro slide, o left tem que ter valor 0.

Para exibir o segundo slide, temos que mover 100% para a esquerda, ou seja, left precisará ter o valor -100%.

Para exibir o terceiro slide, temos que mover 200% para a esquerda, ou seja, left precisará ter o valor -200%.

Vamos aproveitar novamente as variáveis do CSS e a função calc() para tratar isso.

.slides-list{
  --selected-item: 0;
  ...
  position: relative;
  left: calc(var(--selected-item) * -100%);
  ...
}

Para mudar o slide que será exibido basta alterar o valor da variável --selected-item.

Alterando o slide exibido

Vimos então como escolher o slide a ser alterado, bastando alterar a variável CSS --selected-item. Para alterar o valor dessa variável, poderíamos facilmente usar JavaScript. Mas como prometido, esse Slideshow irá usar apenas CSS.

Podemos alterar o valor da variável, indicando qual slide queremos visualizar, usando Radio Buttons.

Como temos 4 slides, vamos criar 4 Radio Buttons antes do nosso Slideshow. Vamos também deixar o primeiro marcado como checked.

Lembre-se de dar o mesmo name para todos, para que apenas um fique marcado.

<input type="radio" class="slide-controller" name="slide" checked />
<input type="radio" class="slide-controller" name="slide" />
<input type="radio" class="slide-controller" name="slide" />
<input type="radio" class="slide-controller" name="slide" />

E agora podemos nos aproveitar do pseudo-seletor :checked do CSS para indicar que o valor da variável --selected-item irá mudar de acordo com o Radio Button marcado.

.slide-controller:nth-child(1):checked ~ .slide-show .slides-list{--selected-item: 0;}
.slide-controller:nth-child(2):checked ~ .slide-show .slides-list{--selected-item: 1;}
.slide-controller:nth-child(3):checked ~ .slide-show .slides-list{--selected-item: 2;}
.slide-controller:nth-child(4):checked ~ .slide-show .slides-list{--selected-item: 3;}

Finalizando

Agora conseguimos escolher qual slide ficará na tela sem o uso de JavaScript. Mas tudo está muito estático. Podemos indicar uma transição para ter um efeito mais animado quando mudarmos de slide.

Para isso usaremos a propriedade transition.

.slides-list{
  ...
  transition: left 0.4s cubic-bezier(0.680, -0.550, 0.265, 1.550);
  ...
}

E só para centralizar todos os itens, vou colocar um text-align: center em body. Mas isso é só para finalizar o exemplo de maneira simples e rápida.

Também tem como melhorarmos a estilização, principalmente desses Radio Buttons, mas isso fica para outra ocasião. ;)