post
Scroll horizontal (snap) com CSS para mobile
Publicado em: 25/02/2022 / Atualizado 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
Publicações recomendadas:
Inscreva-se em Nossa News:
Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.
Link Curto para 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 e sugira um publicação sobre um assunto que tenha dificuldades de resolver.