post #1486

Scroll horizontal (snap) com CSS para mobile

Publicado em: 25/02/2022 / Atualizado em: 25/02/2022

Categorias: Blog CSS HTML

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;
}

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

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

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.