CSS Scroll Snap (Caruseluri și Slidere Nativ în CSS) în CSS

CSS Scroll Snap forțează containerul de derulare (scroll container) să „agațe” și să blocheze automat poziția de vizualizare pe elementele copil atunci când utilizatorul își ridică degetul de pe ecranul tactil sau eliberează rotița mouse-ului. Această tehnologie permite construirea de caruseluri de produse, galerii foto de tip story și pagini prezentate pe secțiuni întregi de ecran direct din CSS nativ, fără a folosi biblioteci JavaScript externe greoaie (precum Swiper sau Slick).

/* 1. Containerul părinte activează derularea orizontală și snapping-ul */
.carusel-container {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    
    /* Activează snap pe axa X; 'mandatory' forțează oprirea exactă pe un card */
    scroll-snap-type: x mandatory;
    
    /* Derulare lină și confortabilă pe mobil */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
}

/* 2. Fiecare card definește punctul de aliniere */
.carusel-card {
    flex: 0 0 85%; /* Pe mobil, cardul ocupă 85% din ecran */
    max-width: 320px;
    
    /* Marginea din stânga a cardului se va alinia perfect cu marginea containerului */
    scroll-snap-align: start;
    
    /* Previne oprirea derulării în poziții ciudate */
    scroll-snap-stop: always;
    
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
}

Valori Cheie pentru scroll-snap-type

• x mandatory: Derulare orizontală. Browserul este forțat să sară obligatoriu pe următorul punct de snap la fiecare gest.
• x proximity: Derulare orizontală. Snapping-ul se activează doar dacă utilizatorul se oprește aproape de un card, permițând derulare liberă dacă gestul a fost rapid.
• y mandatory: Derulare verticală (efect de tip TikTok sau prezentare pe secțiuni de ecran întreg cu 100vh).