post

Scroll horizontal (snap) com CSS para mobile

Publicado em: 25/02/2022

Categorias: BlogCSSHTML

Com este código, é possível criar o efeito de slide, em qualquer bloco HTML apenas com CSS.

Este código funciona bem para dispositivos mobile, que possibilita ao usuário, “rolar” a div para a horizontal com o dedo.

Porem, para desktop, fica um pouco limitado o uso de “rolar para a horizontal”, mas ainda sim o slide funciona.

<div class="slider">
  <div class="item">Primeiro</div>
  <div class="item">Segundo</div>
  <div class="item">Terceiro</div>
</div>
.slider {
  overflow: auto;
  display: flex;
  scroll-snap-type: x mandatory;
}
.item {
  min-width: 100%;
  scroll-snap-align: start;
}

Veja o código funcionando online: https://Scroll-horizontal-snap-com-CSS-para-mobile.brunoalbim.repl.co


Link de compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/1486

ID de Referência: 1486

Sugira uma publicação

Envie uma mensagem para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários