Crea carrusels CSS avançats sense JavaScript

Inici » Pitó » Crea carrusels CSS avançats sense JavaScript

Construir carrusels només amb CSS modern ja no és un somni impossible—és una opció molt real i preparada per a la producció que sovint pot superar les biblioteques clàssiques de control lliscant de JavaScript. Gràcies a funcions com ara acoblament de desplaçament, animacions impulsades per desplaçament, pseudoelements de carrusel experimentals i primitives d'accessibilitat robustes, podeu enviar carrusels lleugers i resistents que alhora es senten suaus, interactius i polits.

Si esteu cansats d'incloure paquets de JavaScript de 50 KB només per mostrar unes quantes diapositives, aquesta guia us explica què pot fer per vosaltres el CSS actual. Desglossarem els conceptes clau darrere dels carrusels només de CSS, com connectar-los amb scroll-snap i quan cal recolzar-se en el nou ::scroll-button() i ::scroll-marker() pseudoelements i com escampar-los en la reproducció automàtica o el comportament circular sense deixar de tractar l'accessibilitat i el rendiment com a ciutadans de primera classe.

Per què els carrusels només de CSS són finalment una opció seriosa

Durant anys, «carrusel» va ser gairebé sinònim de «connector de JavaScript».Solucions com Swiper, Glide o controls lliscants propis eren l'enfocament preferit: gestionaven la navegació, l'estat, la compatibilitat amb el teclat i els gestos tàctils, però a costa de pes addicional, detectors d'esdeveniments a tot arreu i una bona quantitat de gimnàstica DOM.

El CSS modern ha tancat silenciosament la major part d'aquesta bretxa.. Amb propietats com scroll-snap-type i scroll-snap-align, podeu convertir qualsevol desplaçador horitzontal o vertical en una experiència paginada. A més, l'especificació CSS ​​Overflow Level 5 introdueix generat pel navegador botons de desplaçament i marcadors que es comporten com una interfície d'usuari de carrusel amb totes les funcions, però que es declaren completament en CSS.

La gran victòria és que el navegador, i no el codi JavaScript, esdevé el responsable de les principals preocupacions d'UX.: física de desplaçament, navegació del teclat, ordre de focus i fins i tot rols ARIA per als controls del carrusel. En molts casos és realment difícil construir alguna cosa més accessible i amb millor rendiment que el que la plataforma ara us ofereix de fàbrica.

Un altre avantatge important dels carrusels CSS és la resiliènciaSi JavaScript no es carrega, els usuaris amb l'script bloquejat o desactivat encara reben un conjunt d'elements desplaçables perfectament utilitzables. No hi ha hidratació, ni canvis de disseny introduïts per la càrrega tardana del codi, i moltes menys parts mòbils que poden fallar amb el temps.

Bloc de construcció principal: un contenidor desplaçable amb Scroll Snap

Cada carrusel només de CSS comença com un contenidor desplaçable normalPensa en una llista senzilla de diapositives que es poden desplaçar horitzontalment. A partir d'aquí, afegeixes l'ajustament de desplaçament perquè la finestra gràfica es bloquegi naturalment a cada diapositiva.

Una estructura HTML mínima per a un carrusel horitzontal és intencionadament simple: un element contenidor i una sèrie d'elements de diapositiva a l'interior. Podeu utilitzar un ul amb li elements, o un div amb un nen divs—CSS fa la feina pesada, de manera que no necessiteu classes especials per a cada fill tret que el vostre disseny les requereixi.

Una configuració bàsica de scroll-snap podria tenir aquest aspecte en CSS, assumint una vista d'amplada completa i una sola diapositiva:

.carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.carousel-item { flex: 0 0 100%; scroll-snap-align: center; }

Aquí el contenidor utilitza display: flex alinear els seus fills horitzontalmenti overflow-x: auto per habilitar el desplaçament. La màgia està en scroll-snap-type: x mandatory, que indica al navegador que el desplaçament horitzontal sempre s'ha d'establir en un punt d'ajust vàlid, i en scroll-snap-align: center a cada diapositiva, que defineix aquests punts d'ajust.

Aquesta combinació de flexbox i scroll snap sembla instantàniament un carrusel.: els usuaris es desplacen o llisquen, i la diapositiva més propera s'ajusta al seu lloc. Com que aprofita el desplaçament natiu, l'entrada tàctil en telèfons i tauletes simplement funciona, sense cap gestors de gestos o biblioteques addicionals.

No esteu limitat a un element per visualitzacióPer a carrusels de diverses columnes que mostren diverses targetes alhora, podeu utilitzar una amplada flexible per als elements, per exemple:

.carousel-item { flex: 0 0 calc(33.333% - 1rem); margin: 0 0.5rem; scroll-snap-align: center; }

Aquesta variació permet mostrar, per exemple, tres cartes per finestra gràfica amb una mica d'espaiat., tot i que es beneficien del comportament d'encaix. Els usuaris es desplacen per pàgines de targetes en lloc de diapositives d'un sol protagonista, cosa que funciona perfectament per a llistes de productes o galeries.

Botons de desplaçament amb el pseudoelement ::scroll-button()

Un cop tingueu un desplaçador que s'ajusta, el següent que la majoria de la gent vol són botons de navegació explícits.—controls anterior i següent que mouen el carrusel cap a l'esquerra o cap a la dreta. Tradicionalment, es crearien <button> elements, vincular esdeveniments de clic i calcular fins a quin punt s'ha de desplaçar.

L'especificació CSS ​​Overflow 5 introdueix ::scroll-button(), un pseudoelement que permet que el navegador faci tota la feina pesadaTot i que això ja està disponible a partir de Chrome 135 (i normalment amb banderes experimentals al principi), és una petita mostra de com es crearan els carrusels en el futur.

Declareu els botons de desplaçament de la mateixa manera que ho faríeu amb qualsevol altre pseudoelement.Per exemple, per generar botons esquerre i dret per al carrusel:

.carousel::scroll-button(left) { content: "⬅" / "Scroll left"; }
.carousel::scroll-button(right) { content: "⮕" / "Scroll right"; }
.carousel::scroll-button(*) :focus-visible { outline-offset: 5px; }

Quan s'aplica aquest CSS, el navegador crea elements reals <button> elements com a germans del contenidor de desplaçament, els connecta al desplaçador, assigna els rols adequats i connecta el seu comportament. Un sol clic normalment desplaça al voltant del 85% de l'àrea de desplaçament, cosa que sembla una "pàgina" a la majoria de dissenys de carrusel.

Si el vostre disseny espera exactament un element d'amplada completa per clic, podeu combinar aquests pseudoelements amb un snapping més estricte a cada fill afegint scroll-snap-stop: alwaysAixò obliga la finestra gràfica a aterrar als límits de l'element en comptes d'aturar-se a mig camí.

La propietat de contingut aquí té una doble funció: el primer valor és el que els usuaris veuen visualment (en aquest cas, caràcters de fletxa) i la segona cadena és text alternatiu accessible que es pot exposar a la tecnologia assistiva. Podeu donar estil i posicionar aquests botons amb CSS o utilitzar funcions com ara anchor() per alinear-los amb precisió amb el vostre disseny.

Marcadors de desplaçament amb ::scroll-marker() i ::scroll-marker-group

Els punts o etiquetes sota un carrusel, sovint anomenats "vinyetes de paginació" o "marcadors", són un altre requisit comú.Mostren quants elements existeixen i quin és visible actualment, i permeten als usuaris saltar directament a una diapositiva específica.

L' ::scroll-marker() El pseudo-element us proporciona aquests indicadors sense generar manualment enllaços d'àncora o tramsCada marcador és essencialment una navegació <a> element creat pel navegador, que apunta a l'element de desplaçament corresponent i participa en la navegació amb teclat i lector de pantalla.

Per configurar això, indiqueu al navegador on ha de col·locar el grup de marcadors. amb scroll-marker-group, i sobre quins elements crear marcadors. Una configuració mínima podria ser així:

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

El navegador crea un ::scroll-marker-group contenidor com a germà del desplaçador i l'omple amb un marcador per a cada fill seleccionatEn aquest exemple senzill, els marcadors es representen com a punts buits, però podeu utilitzar text com ara "Temporada 1", icones o fins i tot miniatures canviant el content propietat.

Què fa que aquests marcadors siguin especials en comparació amb una barra de desplaçament simple? és que són enllaços de navegació reals. Permeten als usuaris saltar directament a posicions significatives i vénen amb una semàntica útil: hi ha una :target-current estat que indica quin marcador correspon a la diapositiva que es veu actualment o que s'ha agafat. La compatibilitat amb el teclat es comporta com un grup de focus i els lectors de pantalla els poden exposar com un control semblant a una llista de taules.

Aquesta estratègia és especialment potent quan el desplaçador representa fragments lògics en lloc d'elements individuals.Per exemple, en comptes de crear deu marcadors per a deu episodis, podeu crear dos marcadors que saltin a l'inici de la primera i la segona temporada. Sou lliures de decidir quins "punts d'interès" s'han de poder abordar.

Combinant botons i marcadors en una interfície d'usuari de carrusel completa

Quan poses ::scroll-button() i ::scroll-marker() junts al mateix desplaçador, acabes tenint una interfície d'usuari que els usuaris reconeixen instantàniament com un carrusel: controls anterior/següent, una fila de marcadors que mostren quant avançats han estat i un canvi suau entre diapositives.

La diferència clau respecte als controls lliscants clàssics de JavaScript és que la major part d'aquesta lògica ara resideix al navegador.Els botons i marcadors són elements generats amb les funcions ARIA correctes, integrats correctament a l'ordre de tabulació i amb una història d'accessibilitat dissenyada pels equips de navegador subjacents en lloc de reinventar-se per a cada lloc.

Aquest plantejament aporta diversos beneficis molt pràcticsFunciona amb JavaScript desactivat, elimina els problemes de parpelleig i sincronització de la hidratació, redueix el desplaçament acumulatiu del disseny perquè els controls es coneixen en el moment del disseny del CSS i s'integra perfectament amb animacions basades en desplaçament o consultes d'estat de desplaçament si voleu afegir un toc especial.

En dispositius tàctils, l'experiència és naturalment fàcil d'usar amb els dits. perquè el contenidor de desplaçament encara és només un desplaçador natiu. Als escriptoris, la roda del ratolí i l'entrada del teclat funcionen com s'esperava, i els indicadors de focus dels controls generats es poden dissenyar per complir les vostres directrius de disseny i accessibilitat.

Des d'una perspectiva de manteniment, "fes menys, aconsegueix més" esdevé una descripció força precisa.En lloc de mantenir la lògica de múltiples implementacions de carrusel entre projectes, us recolzeu en funcions de plataforma compartides i estandarditzades que aniran millorant amb el temps sense cap treball addicional per part vostra.

Fer que Scroll Snap funcioni en projectes reals

Fins i tot si ignoreu els nous pseudoelements per un moment, l'ajustament de desplaçament per si sol ja és prou bo per a molts carrusels de producció.La compatibilitat del navegador amb el desplaçament i l'ajustament en els motors moderns és sòlida, i el comportament és predictible tant amb la roda del ratolí com amb els gestos tàctils.

En l'escenari més simple, el carrusel HTML podria ser un div amb una sèrie d'imatges a l'interiorPodeu donar a aquest contenidor una classe com ara .carousel i deixeu les imatges filles sense classificar; el CSS s'encarrega de l'alineació i el desplaçament.

En encendre scroll-behavior: smooth al contenidor, el desplaçament entre els punts d'ajust esdevé agradablement animat en lloc de saltar. Això es nota especialment quan els usuaris fan clic a marcadors o enllaços d'àncora, o quan s'activa el desplaçament mitjançant programació en configuracions híbrides.

Cada propietat de desplaçament de tecla juga un paper molt diferent.. scroll-snap-type defineix l'eix i si l'ajustament és obligatori o només un suggeriment; scroll-snap-align en fills especifica on es bloquegen a la vista (inici, centre, final); i scroll-snap-stop: always evita que el navegador salti els punts d'ajust quan es desplaça ràpidament.

Si s'utilitzen conjuntament, aquestes propietats permeten ajustar exactament com s'ha de sentir el carrusel.—des d'un ajust suau i tolerant adequat per a seccions de contingut grans, fins a un comportament estricte diapositiva a diapositiva perfecte per a bàners destacats on no voleu aterrar mai "entre" elements.

Com que això és CSS pur, podeu adaptar fàcilment el disseny de manera responsiva.Amb les consultes multimèdia, podeu canviar d'una diapositiva per vista en pantalles estretes a diverses per vista en escriptoris amples, simplement canviant el flex-basis d'elements. No calen punts d'interrupció de JavaScript, redimensionament d'oients ni amplades recalculades.

Pseudoelements experimentals i detecció de característiques

Els nous pseudoelements orientats a carrusel—::scroll-button(), ::scroll-marker() i ::scroll-marker-group—són potents però encara relativament frescosEn el moment d'escriure aquest article, estan disponibles a Chrome 135 i posteriors, sovint amb indicadors experimentals necessaris, i s'aniran implementant a altres motors amb el temps.

Com que el suport encara no és universal, els llocs de producció haurien de confiar en la detecció de funcions i en les solucions alternatives elegants.El CSS et dóna la @supports at-rule, que permet aplicar regles condicionalment basades en el reconeixement de propietats.

Podeu definir una simple franja de navegació alternativa—un conjunt d'enllaços o botons que es troben sota el carrusel— i després amaguen aquesta franja quan el navegador admet botons de desplaçament natius. Per exemple:

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

Aquí .carousel-nav pot contenir enllaços d'àncora escrits a mà que apuntin a diapositives mitjançant ID, M'agrada <a href="#slide1">1</a>Als navegadors que entenen la nova propietat scroll-button, apareixen els controls nadius i la navegació alternativa s'oculta; als navegadors més antics, la navegació d'àncora es manté, juntament amb scroll-snap per a una experiència perfectament utilitzable.

Aquesta estratègia híbrida permet experimentar amb funcions de carrusel de nova generació de manera segura avui mateix., sense lligar-vos a una configuració de motor o bandera en particular. A mesura que el suport dels navegadors madura, podeu basar-vos més en els pseudoelements i retallar part de la bastida manual.

Carrusels de reproducció automàtica només per CSS amb animacions de fotogrames clau

Una altra sol·licitud habitual és la reproducció automàtica: un carrusel que avança sol i, opcionalment, es posa en pausa quan es passa el cursor per sobre.Tot i que la reproducció automàtica comporta alguns requisits d'experiència d'usuari i accessibilitat, és possible aconseguir-la només amb animacions CSS.

Un patró senzill és animar la translació horitzontal de la pista de diapositives..

@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); }
}
.autoplay-carousel { display: flex; animation: slide 12s infinite; }
.autoplay-carousel:hover { animation-play-state: paused; }

En aquest exemple, els fotogrames clau passen molt de temps a cada desplaçament abans de passar a la diapositiva següent.La pista es repeteix al final, donant l'aspecte d'una presentació de diapositives repetitiva sobre quatre diapositives. Si passeu el cursor per sobre del carrusel, l'animació es posa en pausa, de manera que els usuaris poden inspeccionar el contingut sense haver de lluitar contra el moviment constant.

Per respectar els usuaris que prefereixen un moviment reduït per motius de salut o comoditat, podeu embolicar l'animació en una consulta multimèdia:

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

Això garanteix que en sistemes on es sol·licita un moviment reduït, les diapositives romanguin estàtiques., desactivant efectivament la reproducció automàtica i permetent alhora el desplaçament manual o la navegació amb botons/marcadors on estigui disponible.

Un inconvenient important és que la reproducció automàtica basada en fotogrames clau no s'integra automàticament amb l'ajust de desplaçament.Esteu traduint el contingut manualment en comptes de dependre del desplaçament natiu, per la qual cosa heu de dissenyar l'animació amb cura per evitar diapositives mig visibles i mantenir el temps sincronitzat amb el vostre disseny.

Consideracions d'accessibilitat per als carrusels CSS

L'accessibilitat és una àrea on els carrusels basats en CSS poden destacar realment., perquè gran part de la lògica pesada passa del vostre codi personalitzat als comportaments de la plataforma que han estat dissenyats i provats acuradament.

Quan confieu en el desplaçament natiu més l'ajustament del desplaçament, hereteu automàticament la compatibilitat amb el teclat, el tacte i el ratolí.Els usuaris poden prémer la tecla de tabulació al desplaçador, utilitzar les tecles de fletxa per moure's, lliscar per les pantalles tàctils i desplaçar-se amb una roda, sense cap detector d'esdeveniments ni controladors personalitzats.

Els botons de desplaçament i els marcadors experimentals van un pas més enllàEl navegador els crea amb la semàntica adequada, els integra a l'ordre de tabulació i manté el seu estat, cosa que fa que sigui molt difícil oblidar accidentalment els atributs ARIA o etiquetar-los incorrectament. Els controls de carrusel resultants tendeixen a ser accessibles de manera més consistent que les implementacions casolanes.

Podeu i hauríeu d'afegir pistes semàntiques a les regions del carrusel.Per exemple, marcant el contenidor amb role="region" i descriptiu aria-label ajuda els usuaris de lectors de pantalla a entendre què representa el component:

<div class="carousel" role="region" aria-label="Product gallery">
<div class="carousel-item" aria-label="Slide 1 of 3">...</div>
</div>

Assegurar indicadors d'enfocament visibles per a tots els elements interactius continua sent crucial.Tant si els controls són els vostres propis botons i enllaços com si són pseudoelements generats pel navegador, assegureu-vos que els contorns del focus no s'eliminin ni siguin massa subtils per veure'ls. Ajusteu outline, outline-offset o canvis de fons segons calgui per complir els requisits de contrast.

La mida de l'objectiu tàctil és una altra consideració pràcticaIntenta que els controls siguin com a mínim de 44 × 44 px per complir amb les directrius d'accessibilitat habituals, de manera que els usuaris no tinguin dificultats per tocar fletxes o punts en pantalles més petites.

Per a qualsevol funcionalitat de reproducció automàtica, doneu als usuaris un control clar i eviteu moviments massa agressius.. Proporcioneu un botó de pausa en passar el cursor per sobre o un botó de pausa explícit i considereu la possibilitat de desactivar la reproducció automàtica per defecte si el contingut és dens o amb molt de text. Combinat amb prefers-reduced-motion, això fa que el carrusel sigui més còmode per a un públic més ampli.

Gestionar el desplaçament circular o "infinit" amb CSS

Un comportament que la gent sol demanar és el desplaçament circular: quan arribes a l'última diapositiva i et desplaces més, tornes suaument a la primera, com un carrusel físic que gira sense parar.

Avui dia, no hi ha cap propietat directa, purament CSS, que faci que un contenidor de desplaçament sigui inherentment circular.Sense duplicar contingut, un scroller natiu tindrà un inici i un final: un cop arribeu a l'element final, seguir desplaçant-vos simplement no us farà avançar.

Els autors de les especificacions són conscients que molts carrusels d'IU esperen aquest comportament de bucle., i hi ha un interès actiu en explorar solucions a nivell de plataforma per al desplaçament cíclic, de manera molt semblant a com es van estandarditzar els nous botons i marcadors de desplaçament. Dit això, actualment no es pot demanar a un navegador que encapsuli les posicions de desplaçament de forma nativa amb una única declaració CSS.

En configuracions purament CSS, simular un bucle normalment significa animar transformacions (com en exemples de fotogrames clau de reproducció automàtica) o acceptar un final lineal a la seqüència.Si l'infinit continu és absolutament necessari i no es pot duplicar contingut, JavaScript continua sent l'eina més flexible per ara.

La bona notícia és que res no t'impedeix combinar un carrusel principalment basat en CSS amb una mica de JavaScript on realment afegeixi valor.Podeu utilitzar botons de scroll-snap i CSS per a la navegació diària i, a continuació, afegir unes quantes línies de script per controlar la posició de desplaçament i saltar del final al principi quan sigui necessari.

HTML/CSS versus JavaScript per a carrusels rics basats en targetes

Un dilema freqüent per als desenvolupadors més nous és si un carrusel de targetes més complex "ha" d'estar escrit en JavaScript.La gent sovint s'imagina que tan bon punt es passa de les imatges simples a targetes responsives amb diversos components, el CSS per si sol deixa de ser viable.

A la pràctica, el scroll-snap de CSS funciona igual de bé per a targetes enriquides que per a imatges simples.Sempre que cada targeta sigui un bloc dins del contenidor de desplaçament, podeu ajustar-hi el moviment, animar-lo al seu voltant i afegir-hi capes d'estils addicionals. Els títols, els botons, els fragments de text i fins i tot els continguts multimèdia incrustats no canvien fonamentalment la mecànica.

On destaca JavaScript és en el comportament condicional i l'estat complex.Si el vostre carrusel ha de filtrar targetes dinàmicament, reordenar diapositives, sincronitzar-se amb altres components, obtenir contingut nou sobre la marxa o admetre una lògica altament personalitzada ("si es fa clic en aquest punt, mostra la targeta totalment no relacionada"), JavaScript pot expressar aquesta lògica empresarial més fàcilment que CSS sol.

Tanmateix, un nombre sorprenent de controls lliscants quotidians són essencialment llistes estàtiques d'elements que avancen linealment.Per a aquests casos, utilitzar unes poques línies de CSS en lloc d'importar una gran biblioteca JS és més senzill de raonar i millor per al rendiment. Comprendre scroll-snap i els pseudoelements més nous permet reservar JavaScript per als casos rars en què realment es paga per si mateix.

Si encara esteu aprenent desenvolupament front-end, tractar els carrusels CSS com a línia de base predeterminada és un bon hàbit.Comença amb HTML i CSS, i només utilitza scripts quan trobis una limitació clara. Això t'ensenya més sobre el que la plataforma ja pot fer i sovint condueix a bases de codi més àgils i netes.

Fent un pas enrere, el conjunt emergent de funcions CSS al voltant del desplaçament, l'ajustament, els botons, els marcadors i les consultes d'estat de desplaçament ha transformat els carrusels de widgets amb molts scripts en components majoritàriament declaratius. Basant-se en l'ajustament de desplaçament per al comportament principal de la paginació, utilitzant ::scroll-button() i ::scroll-marker() on sigui compatible, i aplicant les millors pràctiques de detecció de funcions i accessibilitat, podeu enviar carrusels que siguin ràpids, robustos i més fàcils de mantenir que els controls lliscants tradicionals basats en JS, alhora que manteniu prou flexibilitat per barrejar JavaScript on la lògica cíclica o les interaccions avançades realment ho requereixin.