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.
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.