post
Scroll horizontal (snap) com CSS para mobile
Publicado em: 25/02/2022
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.