Carousel CSS senza JavaScript: guida completa

Casa » Python » Carousel CSS senza JavaScript: guida completa

Creare caroselli senza scrivere una sola riga di JavaScript non è più fantascienza.; il CSS moderno ti dà tutto ciò di cui hai bisogno per creare slider fluidi e adatti al tocco utilizzando il proprietà CSS touch-action che si integrano perfettamente nel browser. Dallo scorrimento dinamico agli pseudo-elementi sperimentali che generano automaticamente i controlli di navigazione, è possibile fornire componenti completi mantenendo il pacchetto leggero e semplificando il lavoro.

Se avete mai dovuto lottare con pesanti librerie di caroselli JavaScript, problemi di idratazione o particolarità di accessibilità, i caroselli realizzati esclusivamente con CSS rappresentano una boccata d'aria fresca.. Con le specifiche più recenti (come CSS Overflow Level 5) e funzionalità consolidate come scroll-snap-type, ora è realistico rilasciare caroselli pronti per la produzione che siano veloci, accessibili tramite tastiera e resistenti quando JavaScript è disabilitato.

Perché il CSS moderno rende opzionali i caroselli JavaScript

Per anni, la risposta predefinita alla domanda "come si crea un carosello?" era "usa una libreria JS".Swiper, Slick, Glide, il carosello di Bootstrap e molti altri hanno risolto il problema gestendo al posto tuo listener di eventi, timer, osservatori di ridimensionamento e ruoli ARIA, ma hanno anche aggiunto kilobyte extra al tuo pacchetto e introdotto un'ulteriore dipendenza da gestire.

Oggi, il CSS ha silenziosamente raggiunto il livello necessario per la maggior parte dei casi d'uso comuni dei caroselli.Con poche proprietà, è possibile trasformare un normale scroller orizzontale in un'esperienza di scorrimento paginato con aggancio automatico, compatibile con rotellina del mouse, trackpad, frecce della tastiera e gesti touch. Nessun listener, nessun reflow causato dalla logica JavaScript e nessuna condizione di gara con l'idratazione nei framework.

L'idea di base è semplice: si tratta il carosello come una regione scorrevole.Non si tratta di un componente magico che teletrasporta tra le diapositive. Il CSS, quindi, "aiuta" lo scorrimento con punti di aggancio, transizioni fluide e, nelle specifiche più recenti, pulsanti e marcatori integrati che il browser inserisce nel DOM come veri e propri elementi interattivi.

Questo cambiamento ha grandi conseguenze sulle prestazioni e sulla resilienza.Un carosello CSS funziona perfettamente anche quando JavaScript è bloccato, non si carica o è disabilitato dall'utente. Il motore di scorrimento del browser si occupa della maggior parte del lavoro, ed è altamente ottimizzato in tutti i principali motori di ricerca, nonché configurato per dispositivi a basso consumo e strumenti di accessibilità.

Oltre a ciò, funzionalità CSS come :has()Il layout a griglia e le animazioni basate sullo scorrimento si inseriscono nella stessa area di scorrimento., consentendoti di creare indicatori di scorrimento sofisticati, rivelazioni di contenuti o effetti parallasse senza dover unire tre sistemi diversi (il tuo codice, la logica della libreria e lo scorrimento del browser) in modi fragili.

Elemento costitutivo fondamentale: Scroll Snap per caroselli realizzati esclusivamente con CSS

Il cuore di un carosello realizzato esclusivamente con CSS è il modulo Scroll Snap.che consente di definire punti "magnetici" sui quali la posizione di scorrimento dovrebbe agganciarsi dopo che l'utente ha smesso di scorrere. Invece di fermarsi a metà strada tra due slide, la visualizzazione si aggancia a quella più vicina, offrendo quel classico effetto slider.

La struttura HTML può essere minima: un contenitore che scorre orizzontalmente, più una serie di elementi slide al suo interno. Non è nemmeno necessario assegnare una classe a ciascuna immagine o scheda se il markup è coerente, anche se dare un nome agli elementi spesso aiuta per lo stile e l'accessibilità:

Esempio di struttura per un carosello di immagini di base potrebbe essere concettualizzato come un involucro come <ul class="carousel"> con multipli <li> elementi, ognuno contenente un'immagine o una carta. La magia sta nel CSS:

Definisci il contenitore come un layout flex orizzontale con scorrimento abilitato e specificare che deve agganciarsi lungo l'asse x:

.carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }

Ogni singola diapositiva espone quindi una posizione di scatto, solitamente al centro o all'inizio della finestra di visualizzazione, e imposta una base fissa in modo che uno o più elementi appaiano per ogni vista:

.carousel-item { flex: 0 0 100%; scroll-snap-align: center; }

Questo schema ti fornisce già un carosello sorprendentemente completoGli utenti possono scorrere con il dito su dispositivi mobili, con il mouse o con il trackpad, e la visualizzazione si posizionerà sempre sulla diapositiva più vicina. Non è necessario alcun codice JavaScript per monitorare gli eventi di scorrimento o regolare manualmente le posizioni.

Per creare caroselli multi-articolo (come strisce di prodotti), è sufficiente modificare la base flessibileAd esempio, potresti mostrare tre elementi per vista con un po' di spazio usando qualcosa come flex: 0 0 calc(33.333% - 1rem) margini laterali. Scroll Snap non fa differenza se ogni "pagina" è una singola diapositiva a larghezza intera o un gruppo di schede più piccole.

Proprietà come object-fit: cover sono utili quando si lavora con immagini non elaborate, assicurando che riempiano l'area della diapositiva senza distorsioni. In combinazione con un rapporto di aspetto fisso, è possibile ottenere caroselli di immagini che mantengono un aspetto visivamente coerente su qualsiasi dimensione dello schermo.

Dai semplici scroller alle giostre dall'aspetto nativo

Un carosello semplice con scorrimento e aggancio è già piacevole, ma le specifiche moderne lo portano a un livello superiore., soprattutto in Chrome 135+ dove la bozza di CSS Overflow Livello 5 inizia a emergere come funzionalità reali. La specifica tratta un carosello come un'area di scorrimento con un'interfaccia utente opzionale generata dal browser intorno ad esso.

In quel modello, un “carosello” equivale a: uno scorrimento più fino a due serie di affordance—pulsanti di scorrimento e indicatori di scorrimento. Entrambi vengono creati tramite pseudo-elementi CSS, ma il browser emette elementi DOM corrispondenti accanto allo scroller, in modo che si comportino come controlli nativi.

Fondamentalmente, il browser collega per te la semantica, l'ordine di messa a fuoco e la gestione dello statoGli elementi iniettati hanno ruoli appropriati, sono navigabili tramite tasto Tab in un ordine logico e riflettono la posizione di scorrimento corrente. Ciò significa che replicare lo stesso livello di accessibilità con una libreria JS creata manualmente non è banale; sarebbero necessari attributi ARIA, comportamento di focus group, navigazione da tastiera e annunci di regioni in tempo reale, il tutto funzionando insieme.

Anche se non sei ancora pronto a fare affidamento sulle parti sperimentali, questa direzione è importanteCiò indica che i caroselli, le schede, i componenti scrollspy e modelli di interfaccia utente simili vengono elevati a "elementi di prima classe" nel CSS, il che ridurrà progressivamente la necessità di codice JavaScript personalizzato.

Il risultato finale è una base di riferimento più solida per tutti gli utenti.—compresi coloro che disabilitano JavaScript, si affidano a tecnologie assistive, possiedono dispositivi a bassa potenza o navigano in condizioni di rete instabili. Lo scorrimento nativo e lo stile CSS sono superiori ai widget ricchi di script in tutti questi scenari.

Aggiunta di pulsanti di scorrimento con ::scroll-button()

Su alcune piattaforme sono già visibili delle piccole frecce accanto alle barre di scorrimento., ma il nuovo ::scroll-button() Lo pseudo-elemento fa un ulteriore passo avanti e permette al CSS di definire pulsanti "precedente/successivo" dedicati per qualsiasi area scorrevole, inclusi i caroselli.

Questi pulsanti di scorrimento definiti tramite CSS si comportano in modo diverso dalle frecce della barra di scorrimento tradizionale.Invece di spostare il contenuto con piccoli incrementi, questi pulsanti si spostano di circa l'85% dell'area visibile a ogni clic. In un carosello a larghezza intera con allineamento a scatto, l'esperienza è quasi identica a quella di un pulsante di navigazione per ogni diapositiva.

Se hai davvero bisogno di un movimento preciso di un singolo elemento, puoi combinare le opzioni di aggancio della rotellaUna ricetta tipica è scroll-snap-type: x mandatory sul contenitore e scroll-snap-stop: always su ogni scheda secondaria. In questo modo, una sola pressione del pulsante di scorrimento consente di passare da una scheda all'altra.

Dal punto di vista della sintassi, l'aggiunta di pulsanti di scorrimento è molto simile alla stilizzazione di altri pseudo-elementi. Scegli l'elemento scorrevole (ad esempio, .carousel) e obiettivo ::scroll-button(left) or ::scroll-button(right) per rappresentare i comandi avanti e indietro. Un esempio minimo:

.carousel::scroll-button(left) { content: "⬅" / "Scroll left"; }

.carousel::scroll-button(right) { content: "⮕" / "Scroll right"; }

Il valore del contenuto separato da barre consente di fornire un'etichetta sia visiva che accessibileIl browser crea quindi dei veri <button> I nodi vengono considerati come elementi fratelli dell'area di scorrimento e il contenuto viene inserito al loro interno. È possibile posizionarli e stilizzarli a piacimento, proprio come qualsiasi altro elemento, utilizzando il posizionamento assoluto, il CSS Grid o persino il posizionamento tramite ancoraggio.

Qui lo stile è ancora importanteAd esempio, applicando una regola come .carousel::scroll-button(*):focus-visible { outline-offset: 5px; } Garantisce che, quando gli utenti si spostano su questi pulsanti tramite il tasto Tab, visualizzino un anello di messa a fuoco ben definito, distanziato dal bordo dell'elemento, preservando l'usabilità della tastiera e la conformità alle linee guida WCAG.

Dietro le quinte, il browser tiene traccia dello stato dei pulsanti e dell'intervallo di scorrimento disponibile.Ciò significa che non devi preoccuparti di disabilitare il pulsante "precedente" quando ti trovi sulla prima diapositiva o il pulsante "successivo" alla fine; la piattaforma è in grado di gestire queste condizioni in modo standardizzato.

Indicatori di scorrimento con ::scroll-marker() per la navigazione tramite punti elenco o etichette

Oggigiorno gli utenti si aspettano quasi sempre che gli indicatori visivi, come punti o miniature sotto il carosello, siano presenti.. La nuova ::scroll-marker() Lo pseudo-elemento consente di generare questi indicatori esclusivamente tramite CSS, ognuno collegato a uno specifico elemento nell'elenco scorrevole.

A differenza del cursore della barra di scorrimento, i marcatori di scorrimento rappresentano punti di interesse semantici.Ogni marcatore corrisponde non solo a una posizione in pixel, ma a un vero e proprio elemento figlio, il che lo rende ideale per scenari come le stagioni di una serie TV, le categorie di prodotti o i capitoli logici di una storia, piuttosto che per ogni singolo fotogramma.

I marcatori risultano validi <a> elementi, offrendoti gratuitamente due importanti funzionalità: la navigazione all'interno della pagina e la corretta semantica per i lettori di schermo. Si comportano in modo molto simile ai link di ancoraggio, ma con alcuni miglioramenti specifici per l'utilizzo nei caroselli.

Tra questi miglioramenti c'è il :target-current pseudo-classe, che si attiva quando l'elemento corrispondente è attualmente agganciato alla visualizzazione o altrimenti considerato "la diapositiva attiva". È possibile utilizzarlo per evidenziare il marcatore attivo con uno sfondo o un bordo diverso.

Per collegarlo, devi prima definire dove deve trovarsi il gruppo di marcatori usando il scroll-marker-group proprietà sul contenitore, in genere prima o dopo lo scroller. Ad esempio, scroll-marker-group: after; posizionerebbe i marcatori dopo la regione del carosello nel DOM.

Quindi si prendono di mira i singoli bambini che dovrebbero generare marcatori. Se le tue diapositive sono <li> elementi, qualcosa del tipo .carousel > li::scroll-marker Andrà bene. Un modello comune è quello di creare punti vuoti:

.carousel { scroll-marker-group: after; }

.carousel > li::scroll-marker { content: " "; }

.carousel > li::scroll-marker:target-current { background: var(--accent); }

Il browser si occupa di generare il <a> marcatori, raggruppandoli in un contenitore dedicato ::scroll-marker-groupe rendendoli accessibili come elementi navigabili tramite tastiera che si comportano come un focus group. Gli screen reader possono presentarli in modo simile a una tablist: si sposta il focus tra i marcatori e li si attiva per passare a una diapositiva specifica.

I marcatori non si limitano ai punti. Puoi impostare content ai numeri ("1", "2", ecc.), etichette leggibili dall'uomo come "Stagione 1" o "Capitolo 3", o persino immagini in linea per creare gallerie di miniature per layout ricchi di foto come le gallerie di prodotti per l'e-commerce.

Combinazione di pulsanti, indicatori e strategie di ripiego

Quando si combinano pulsanti di scorrimento e marcatori sopra un carosello con aggancio a scorrimento, si ottiene un componente che risulta indistinguibile da una soluzione JSma è più facile da manutenere e ha meno componenti mobili. Gli utenti possono cliccare sulle frecce, toccare i punti elenco, scorrere sui touchscreen o utilizzare la navigazione da tastiera, il tutto con un comportamento coerente.

Questa combinazione risolve anche i problemi più comuni relativi alle prestazioni e all'esperienza utente.Poiché non esiste alcuno script che coordini i cambi di diapositiva, non si verificano sbalzi di layout dovuti a modifiche manuali. scrollLeft Regolazioni o timer che si attivano in momenti inopportuni. Il CLS (Cumulative Layout Shift) è ridotto poiché l'albero DOM è pronto fin dall'inizio e non si iniettano o misurano elementi in fasi avanzate del ciclo di vita.

Tuttavia, c'è un problema: ::scroll-button e ::scroll-marker sono ancora sperimentali e al momento sono disponibili solo in Chrome 135 e versioni successive tramite flag sperimentali. Ciò significa che è assolutamente necessario progettare soluzioni di fallback adeguate se si prevede di utilizzarle su siti di produzione.

Rilevamento delle caratteristiche tramite @supports è il tuo miglior alleato qui. Puoi visualizzare una barra di navigazione tradizionale: collegamenti a #slide1, #slide2 e così via: per impostazione predefinita, si nasconde quando sono disponibili i controlli nativi. Uno schema concettuale approssimativo è il seguente:

.carousel-nav { display: flex; gap: 0.5rem; }

@supports (scroll-button-inline: both) { .carousel-nav { display: none; } }

In HTML è sufficiente una semplice barra di navigazione con link di ancoraggio.: ogni diapositiva ottiene un ide i puntatori di navigazione puntano a quegli ID. Il passaggio a un ancoraggio all'interno di un contenitore scroll-snap si integra perfettamente con il comportamento di aggancio, in modo che la diapositiva si agganci ordinatamente dopo il salto.

Ciò significa che puoi usufruire dei vantaggi degli pseudo-elementi sperimentali nei browser compatibili—pulsanti nativi completi, marcatori e hook per lo stato di scorrimento— offrendo al contempo un'esperienza pienamente funzionale altrove. Nessun utente si ritrova bloccato con uno slider inutilizzabile.

Inoltre, tutto ciò funziona anche quando JavaScript è disabilitato., perché ti affidi esclusivamente agli ancoraggi HTML, al comportamento di scorrimento CSS e al motore di scorrimento del browser. Per molti modelli di UX, come gallerie, timeline e presentazioni passo passo, questo è più che sufficiente.

Carousel con riproduzione automatica e animazioni keyframe, realizzati esclusivamente con CSS.

Una caratteristica comune che le persone si aspettano dai caroselli è la riproduzione automatica.—le diapositive avanzano automaticamente dopo alcuni secondi. Sebbene questo venga spesso implementato con timer JavaScript, è possibile ottenere un comportamento simile anche utilizzando animazioni CSS pure.

Il trucco consiste nell'animare la trasformazione di una riga flessibile che contiene tutte le diapositivePer un numero fisso di diapositive, si definisce una sequenza di fotogrammi chiave in cui la traccia rimane in ciascuna posizione della diapositiva per un certo periodo, quindi passa alla successiva. Qualcosa del genere:

@keyframes slide { 0%, 20% { transform: translateX(0); } 25%, 45% { transform: translateX(-100%); } 50%, 70% { transform: translateX(-200%); } 75%, 95% { transform: translateX(-300%); } 100% { transform: translateX(0); } }

Quindi applichi questa animazione al contenitore che contiene gli elementi della diapositiva, ad esempio .autoplay-carousel { display: flex; animation: slide 12s infinite; }Le percentuali indicano i tempi di "sosta" su ciascuna diapositiva, in modo che il contenuto sia leggibile prima di passare alla successiva.

È fondamentale aggiungere un modo per consentire agli utenti di mettere in pausa la riproduzione automatica.. Un modello semplice ma efficace è quello di mettere in pausa al passaggio del mouse con .autoplay-carousel:hover { animation-play-state: paused; }, in modo che gli utenti desktop possano interrompere il movimento quando interagiscono con il contenuto.

Le considerazioni sull'accessibilità vanno ben oltre, includendo le preferenze di movimento.. Rispetto prefers-reduced-motion è considerata la prassi migliore, quindi puoi disattivare completamente l'animazione per gli utenti che preferiscono meno movimento:

@media (prefers-reduced-motion: reduce) { .autoplay-carousel { animation: none; } }

Sebbene le soluzioni di autoplay CSS non possano gestire facilmente tutti i casi limite che JS può—come il conteggio dinamico delle diapositive o la complessa logica di pausa/ripresa gestita dall'utente—sono sorprendentemente validi per i caroselli semplici e statici quando si vuole evitare del tutto la programmazione.

Confronto tra caroselli realizzati solo con CSS e caroselli realizzati con JavaScript

Decidere tra CSS e JavaScript per un carosello non è una questione di tutto o niente.Dipende dalle tue esigenze, dal pubblico di riferimento e dal budget di manutenzione. Tuttavia, in molti scenari reali, l'equilibrio si è spostato nettamente a favore dei CSS.

Dal punto di vista delle prestazioni, i caroselli CSS sono i chiari vincitoriNon c'è analisi o esecuzione di codice di libreria, nessun listener di eventi per ogni interazione di scorrimento e nessun ricalcolo del layout in fase di esecuzione attivato da modifiche tramite script. Il motore di scorrimento del browser è scritto in codice nativo altamente ottimizzato e calibrato per qualsiasi dispositivo, dai desktop di fascia alta agli smartphone a basso consumo.

In termini di accessibilità, le nuove funzionalità del carosello CSS alzano notevolmente l'asticella.I pulsanti di scorrimento e i marcatori forniti dal browser sono preconfigurati con ruoli ARIA, comportamento della tastiera e annunci che altrimenti dovrebbero essere ricreati meticolosamente in JavaScript. Anche senza questi elementi, un carosello con aggancio allo scorrimento può comunque essere reso accessibile tramite ruoli ed etichette.

D'altro canto, JavaScript rimane utile per modelli molto avanzatiSe hai bisogno di una logica di riproduzione automatica elaborata, di hook per l'analisi dei dati, di una fisica personalizzata o di sincronizzare più caroselli con uno stato condiviso (ad esempio, immagine principale più riga di miniature più paginazione esterna), gli approcci basati su script possono comunque risultare più flessibili.

Tuttavia, il punto fondamentale è che molti caroselli "quotidiani" in realtà non necessitano di questo livello di complessità.Una semplice galleria di prodotti, uno slider di testimonianze o una sezione "post in evidenza" possono solitamente essere implementati con lo scroll snap, poche regole CSS e controlli nativi opzionali, evitando così di dover aggiungere una dipendenza da 50 KB solo per passare da una diapositiva all'altra.

Un altro aspetto da considerare è la resilienza quando JavaScript fallisceI caroselli realizzati esclusivamente con CSS continuano a funzionare perfettamente anche se il codice JavaScript viene bloccato da un proxy aziendale, interrotto da un ad blocker o semplicemente non è ancora stato caricato quando l'utente accede alla pagina. Questo tipo di degrado graduale delle prestazioni è difficile da ottenere con librerie che dipendono da una fase di inizializzazione successiva al caricamento della pagina.

Procedure ottimali di accessibilità per i caroselli CSS

Anche se il browser aiuta con alcuni aspetti di accessibilità, tu continui a svolgere un ruolo cruciale Nel rendere il tuo carosello CSS fruibile da tutti, la semantica, la gestione del focus e la sensibilità al movimento dovrebbero essere al centro della tua attenzione.

Innanzitutto, assegna alla giostra un punto di riferimento appropriato. Avvolgendolo in un elemento con role="region" e una descrittiva aria-label Sezioni come "Galleria prodotti" o "Articoli in evidenza" facilitano la ricerca e la comprensione dei contenuti da parte degli utenti di screen reader.

Ogni diapositiva può anche avere un'etichetta accessibile, ad esempio tramite aria-label indicando "Diapositiva 1 di 3", "Diapositiva 2 di 3" e così via. In questo modo, quando un utente arriva su una diapositiva, ottiene immediatamente informazioni sulla sua posizione nella sequenza.

Non dimenticare gli indicatori di messa a fuoco visibili. Qualsiasi elemento interattivo, che sia un ::scroll-button ::scroll-marker-collegamento generato automaticamente o ancoraggio manuale nella navigazione di fallback: necessita di uno stile di focus chiaro che rispetti le linee guida sul contrasto e non venga rimosso dai ripristini globali.

Se si utilizzano animazioni con riproduzione automatica o animazioni basate sullo scorrimento, rispettare le preferenze di movimento.. utilizzando prefers-reduced-motion Disabilitare o semplificare le animazioni non è un'opzione, ma una necessità se si ha a cuore il benessere degli utenti che soffrono di cinetosi, ed è abbastanza semplice racchiudere gli effetti più intensi in una media query.

Infine, considera le dimensioni dei target di contattoChe si tratti di personalizzare i marcatori di scorrimento nativi o i link di navigazione, è importante che le aree interattive abbiano una dimensione di almeno 44x44 pixel CSS. Questo solitamente significa utilizzare spaziatura e padding generosi, piuttosto che cerchi minuscoli e ravvicinati.

Flussi di lavoro reali, strumenti e prospettive future

Per semplificare la sperimentazione con i caroselli CSS, alcuni team hanno creato strumenti di configurazione in tempo reale. dove è possibile azionare interruttori (abilitare i pulsanti di scorrimento, attivare/disattivare i marcatori, regolare le modalità di aggancio) e visualizzare immediatamente il CSS aggiornato necessario per quella configurazione. Questi ambienti di prova sono fantastici per imparare sperimentando.

Oltre ai configuratori, gallerie curate di demo di caroselli realizzati esclusivamente con CSS mostrano le potenzialità di questa soluzione.Troverai modelli come interfacce a schede, navigazione a scorrimento, slide a passaggi, gallerie di miniature e altro ancora, tutti basati sulla stessa struttura di aree di scorrimento, aggancio e controlli opzionali.

Molti di questi siti demo vengono distribuiti intenzionalmente senza JavaScript. per dimostrare il punto: un'interfaccia utente ricca e interattiva è completamente realizzabile con il solo HTML e CSS. Spesso espongono le loro utilità attraverso @layer dichiarazioni, in modo da poter esaminare e selezionare gli stili che meglio si adattano al proprio sistema di progettazione.

Guardando al futuro, la piattaforma CSS sta già lavorando su due importanti percorsi evolutivi.La prima è "porta i tuoi elementi", dove invece di affidarti a pulsanti e marcatori generati dal browser, potrai inserire i tuoi <a> e <button> markup, pur beneficiando della logica di scorrimento sottostante.

Ciò aprirebbe le porte a controlli di marca, dallo stile ricercato, realizzati con framework di utilità. Come Tailwind, ma mantenendo la semantica e il comportamento governati dalla piattaforma. In pratica, si abbellirebbe l'interfaccia utente, ma il browser resterebbe il cervello dell'operazione.

La seconda grande area è lo scorrimento ciclico o infinitoMolti caroselli odierni "si avvolgono" al termine della visualizzazione, tornando senza soluzione di continuità alla prima diapositiva. Implementare questa funzionalità in modo pulito è complesso e spesso implica la duplicazione dei contenuti o l'utilizzo di logiche intricate. Il supporto a livello di piattaforma per lo scorrimento ciclico consentirebbe ai browser di gestire il comportamento di avvolgimento in modo più elegante ed efficiente.

Man mano che queste funzionalità maturano e si diffondono da Chrome ad altri motoriIl divario tra ciò che un "carosello CSS nativo" può fare e ciò che offrono le librerie JavaScript più complesse continuerà a ridursi, rendendo gli approcci senza script il punto di partenza predefinito piuttosto che un esperimento marginale.

In definitiva, il CSS moderno ti offre ogni motivo per ripensare al modo in cui crei i caroselli.Partendo da un semplice layout a scorrimento, aggiungendo pulsanti e marcatori sperimentali laddove supportato e integrando le migliori pratiche di accessibilità, è possibile realizzare slider reattivi, fluidi e robusti senza ricorrere a dipendenze JavaScript. Per molti progetti, questo si traduce in pagine più veloci, meno codice da gestire e un'esperienza più affidabile per ogni utente.