dexblog.ro
Acces rapid: Învață AI Învață Programare Specificații Dispozitive Comparații
TW Toate comenzile Tailwind CSS

Alinierea magnetică cu snap-x și snap-start în Tailwind CSS în Tailwind CSS

Interactivitate, Formulare și Elemente Speciale Tailwind CSS 3.0+ Q&A / Distribuie cod

Aliniere magnetică automată la puncte fixe (Scroll Snapping) în carusele sau galerii foto derulabile pe mobil.

Sintaxă 
snap-x snap-mandatory overflow-x-auto | snap-center

Ce este Scroll Snap în Tailwind CSS

CSS Scroll Snap permite construirea de carusele mobile native fără niciun rând de cod JavaScript. Părintele derulabil primește clasa snap-x snap-mandatory, iar fiecare card din interior primește snap-start sau snap-center, făcând ca derularea să se oprească magnetic fix pe fiecare imagine.

Exemplu Concret: Carusel nativ cu fixare magnetică
<div class="flex overflow-x-auto snap-x snap-mandatory gap-4 p-4">
  <div class="snap-center shrink-0 w-80 h-48 bg-blue-500 rounded-xl">Card 1</div>
  <div class="snap-center shrink-0 w-80 h-48 bg-purple-500 rounded-xl">Card 2</div>
  <div class="snap-center shrink-0 w-80 h-48 bg-indigo-500 rounded-xl">Card 3</div>
</div>

Comunitate & Schimb de cunoștințe

Întrebări & Exemple de Cod: Alinierea magnetică cu snap-x și snap-start în Tailwind CSS

Ai o nelămurire despre utilizarea comenzii Alinierea magnetică cu snap-x și snap-start în Tailwind CSS sau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!

💬

Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!

Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.

Comunitate Adaugă o întrebare sau distribuie un cod

Moderare & Siguranță:

Pentru a menține calitatea și securitatea informațiilor, fiecare întrebare sau fragment de cod/prompt este analizat (manual sau prin moderare asistată de AI) înainte de publicare.