Slideshow apenas com CSS \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 06 Horas 48 Min 31 Seg Tempo restante da oferta: 06 48 31 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Slideshow apenas com CSS [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # Slideshow apenas com CSS Aprenda a criar um slideshow de maneira bem simples utilizando apenas CSS moderno. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 9 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/07/04170829/css-slider.png) Olá, Web Developers! Hoje vou mostrar como criar um slideshow bem simples apenas com CSS. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-HTML.jpg) ](https://www.treinaweb.com.br/ebook/guia-HTML/) ## 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. ```html ``` ## Estilização básica dos slides Agora nós iremos fazer uma estilização bem simples na lista de nossos slides. ```css .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: ```css .slides-list{ ... width: 400%; ... } ``` Mas isso vai deixar o nosso código fixo. Vamos aproveitar que hoje em dia o CSS aceita variáveis! ```css .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. ```html ``` ```css .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`. ```css .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. ```css .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. ```html ``` 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. ```css .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`. ```css .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. ;) [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/sessao-mentoria.jpg) ](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?forma=cartao) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/02/09112204/capa-marketing-400x280.png) [ Marketing Digital ](https://www.treinaweb.com.br/blog/categoria/marketing-digital) 9 anos atrás ## [ Redes sociais: quais devo escolher para a minha empresa? ](https://www.treinaweb.com.br/blog/redes-sociais-quais-devo-escolher-para-a-minha-empresa) Separamos as cinco principais redes sociais do momento e destacamos os pontos fortes de cada uma delas e sobre como podem ser úteis para o seu negócio. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/CSS-IN-JS-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ CSS in JS ](https://www.treinaweb.com.br/blog/css-in-js) Veja neste artigo o CSS in JS, a técnica que permite escrever estilos CSS no JavaScript, deixando a aplicação flexível e modularizada. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/03075048/Font-Awesome-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS: Dominando o Font Awesome ](https://www.treinaweb.com.br/blog/css-dominando-o-font-awesome) Aprenda como utilizar todo o potencial do Font Awesome para facilitar o uso de ícones em suas aplicações. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/07102001/CSS-Box-Model-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS - Definindo o cálculo de dimensões com box-sizing ](https://www.treinaweb.com.br/blog/css-definindo-o-calculo-de-dimensoes-com-box-sizing) Aprenda a definir como o CSS calcula as dimensões dos seus elementos e evite que seu layout quebre inesperadamente. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/07101943/Aspect-Ratio-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS - Altura automática proporcional à largura sem JavaScript ](https://www.treinaweb.com.br/blog/css-altura-automatica-proporcional-a-largura-sem-javascript) Aprenda a definir elementos com dimensões proporcionais com CSS sem nenhuma linha de JavaScript. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/05155045/Flip-Cards-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS: Aprenda a Criar o Efeito de Flip Cards ](https://www.treinaweb.com.br/blog/css-aprenda-a-criar-o-efeito-de-flip-cards) Aprenda a criar o efeito de Flip Cards com CSS puro de maneira bem simples. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/02075846/0-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ CSS Grid – Um Guia Interativo (Parte 2 – Itens) ](https://www.treinaweb.com.br/blog/css-grid-um-guia-interativo-parte-2-itens) Aprenda definitivamente a trabalhar com os Itens do CSS Grid com este Guia Interativo para facilitar o seu trabalho na construção de layouts com CSS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/01182054/0-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ CSS Grid – Um Guia Interativo (Parte 1 – Containers) ](https://www.treinaweb.com.br/blog/css-grid-um-guia-interativo-parte-1-containers) Aprenda definitivamente a trabalhar com CSS Grid com este Guia Interativo para facilitar o seu trabalho na construção de layouts com CSS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/02/01152334/container-1-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ CSS Flexbox - Um Guia Interativo (Parte 2 - Itens) ](https://www.treinaweb.com.br/blog/css-flexbox-um-guia-interativo-parte-2-itens) Aprenda a trabalhar com o CSS Flexbox com este guia definitivo e interativo! Vamos ver as propriedades dos itens. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/01152250/ALINHAMENTO-1-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ CSS Flexbox - Um Guia Interativo (Parte 1 - Containers) ](https://www.treinaweb.com.br/blog/css-flexbox-um-guia-interativo-parte-1-containers) Aprenda a trabalhar com o CSS Flexbox com este guia definitivo e interativo! Vamos ver primeiro as propriedades dos containers. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/css-filters-copy-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 10 anos atrás ## [ CSS Filters - Tratamento de imagens em sua página ](https://www.treinaweb.com.br/blog/css-filters-tratamento-de-imagens-em-sua-pagina) Com a evolução do CSS3 passou a ser possível criar muitos dos efeitos dos softwares de edição de imagem diretamente pelo CSS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/float-css-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 10 anos atrás ## [ CSS: Float vs Inline Block - Qual usar em meus layouts? ](https://www.treinaweb.com.br/blog/css-float-vs-inline-block-qual-usar-em-meus-layouts) Você sabe quando utilizar "float" e "display: inline-block"? Veja as características de cada um e aprenda a aplicá-los em seus projetos. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **06h 48min 31s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58