Generatore di carosello (slider) con CSS scroll-snap
Incolla le immagini e scegli quante mostrarne alla volta. Lo scorrimento è gestito dal browser con scroll-snap; lo script muove solo le frecce.
Come si usaCarosello leggero che si trascina con il dito
Disponibile in: 
Generatore di carosello (slider) con CSS scroll-snap: a cosa serve
Il carosello di foto o card è comune nei siti di e-commerce, ma le librerie di slider pesano e a volte bloccano lo scorrimento sul cellulare.
Questo generatore usa lo scroll-snap del CSS, che aggancia ogni elemento usando lo scorrimento nativo del browser: il trascinamento con il dito è fluido, funziona con trackpad e tastiera e ha quasi zero JavaScript. Scegli quanti elementi mostrare alla volta su computer e cellulare (anche uno e un pezzo del successivo, per far capire che si può trascinare), lo spazio e gli angoli. Senza rotazione automatica, che disturba la lettura e l’accessibilità (WCAG 2.2.2).
Come si usa
- Incolla gli indirizzi delle immagini.
- Scegli quante mostrarne alla volta e la spaziatura.
- Copia il codice e incollalo nel sito.
Quando usarlo
- Vetrina di prodotti.
- Foto di lavori e portfolio.
- Card di testimonianze o servizi.
Domande frequenti
Perché scroll-snap e non una libreria?
Lo scroll-snap usa lo scorrimento nativo del browser: il trascinamento su cellulare è fluido come su Instagram, funziona con trackpad e tastiera e non pesa nulla. Le librerie di slider di solito aggiungono decine di KB di JavaScript per fare la stessa cosa.
Il carosello scorre da solo?
No, di proposito. Un carosello che gira da solo disturba la lettura ed è un problema di accessibilità (la WCAG 2.2.2 richiede di poter mettere in pausa ciò che si muove per più di 5 secondi). Chi vuole vedere altro trascina o usa le frecce.
Si può usare con card di testo?
Sì. Sostituisci le immagini con qualsiasi contenuto dentro ogni elemento della lista; dimensione e aggancio restano gli stessi.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.