Blog ComercialWeb - São Paulo - SP
E-mail: [email protected]
E-mail: [email protected]
<div class="carrossel">
<div class="track">
<figure id="s1">Slide 1</figure>
<figure id="s2">Slide 2</figure>
<figure id="s3">Slide 3</figure>
</div>
<nav class="dots">
<a href="#s1">•</a>
<a href="#s2">•</a>
<a href="#s3">•</a>
</nav>
</div>
.carrossel{ overflow: hidden; }
.track{ display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.track figure{ scroll-snap-align: start; min-height: 220px; display: grid; place-items: center; background: #eee; }
.dots{ text-align: center; margin-top: 8px; }
.dots a{ text-decoration: none; font-size: 24px; margin: 0 6px; }
Use scroll-snap para ancorar slides, âncoras para navegação e garanta contraste/legibilidade. Para autoplay, prefira JS simples e respeite acessibilidade.
