> ## Content Index
> Fetch the complete content index at: https://productoversee.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Carrossel descomplicado com HTML, CSS
- URL: https://productoversee.com/blog/carrossel-descomplicado-com-html-css/
- Published: 2016-09-04T03:00:00.000Z
- Updated: 2023-02-22T01:50:58.000Z
- Description: Seus problemas acabaram! (música de chegada milagrosa), com o conhecimento de poucas técnicas podemos resolver esse “gigante” problema facilmente.
- Author: Leonardo Camp
- Tags: Desenvolvimento, #blog

Não é difícil perceber que muitos desenvolvedores tanto iniciantes como os veteranos de guerra ainda sofrem quando o assunto é carrossel, mesmo utilizando frameworks como BootStrap. Mas seus problemas acabaram! (música de chegada milagrosa), com o conhecimento de poucas técnicas podemos resolver esse “gigante” problema facilmente.

### **Pseudo classe :target – CSS**

Para resolver o grande problema de transição do carrossel, vamos utilizar a pseudo classe `:target`, que atribui algumas características do CSS para o elemento HTML.

Para quem ainda não conhece a pseudo classe “:target” aqui vai um exemplo bem alto explicativo.

###### HTML

###### CSS

Você pode conferir o resultado no CODEPEN aqui.

O Tableless tem [um artigo que ensina a fazer abas usando apenas CSS3 com o pseudo classe :target](https://tableless.com.br/css3-abas-com-a-pseudo-classe-target/?ref=productoversee.com).

### **Estrutura HTML**

A estrutura que iremos utilizar também é bem simples. Primeiramente uma DIV como “container” que é onde irá acontecer o carrossel, também utilizaremos outras DIVs que chamaremos de “wall-x” onde x é o valor da DIV no carrossel.

## **Mão na massa**

Vamos começar pelo HTML definindo a estrutura do nosso carrossel.

Terminado a estrutura, devemos deixar todas as DIVs wall com “display: none;” ( sim, todas! ) para não serem listadas de uma vez.

###### Explicando…

Basicamente, definimos o tamanho do “container”. Deixamos todas as DIVs “wall” com “display: none;” e definimos que todo “target” terá o “display: block;”. Se nada estiver aparecendo na sua tela, não se assuste, tudo está funcionando, o que acontece é que você não tem nem um “target” definido, mas você pode fazer um teste adicionando “#wall-1” na sua url.

Ok, já temos 90% do carrossel pronto. Para finalizarmos o carrossel precisamos adicionar as setas (ou botões como preferir) para fazer a transição de uma tela para outra, e é ai que vem a outra parte fácil. A unica coisa que precisamos fazer é adicionar links que setam para o target anterior ou seguinte, neste caso, se você estiver no “#wall-2” o anterior seria “#wall-1” e o seguinte “#wall-3” (precisava explicar?).

Para facilitar a exibição do primeiro target (sem ter que criar um link personalizado) você pode simplesmente colocar uma linha de javascript para todo o carrossel ficar ativa 😉

Você pode ver o código em ação no CODEPEN aqui.

Pronto! Uma maneira muito simples para resolver um grande problema.

## **Possível problema que você poderá encontrar**

Caso você esteja utilizando algum link com target “#” para executar alguma ação, o “#wall-x” que está sendo setado perderá o foco, e logicamente terá a atribuição “display: none;” retomada. Neste caso é recomendável que não utilize targets na mesma pagina do carrossel e substitua os links “#” por funções onclick via JavaScript ou JQuery.