Carrusels CSS sense JavaScript: Guia completa

Inici » Pitó » Carrusels CSS sense JavaScript: Guia completa

Construir carrusels sense una sola línia de JavaScript ja no és ciència-ficció; el CSS modern us ofereix tot el que necessiteu per crear controls lliscants suaus i fàcils de tocar utilitzant el Propietat d'acció tàctil CSS que semblen natius al navegador. Des de l'ajustament del desplaçament fins a pseudoelements experimentals que generen automàticament controls de navegació, podeu oferir components complets alhora que manteniu el vostre paquet àgil i la vostra vida més senzilla.

Si alguna vegada has tingut problemes amb biblioteques de carrusel JS pesades, problemes d'hidratació o peculiaritats d'accessibilitat, els carrusels només amb CSS són un alè d'aire fresc.Amb les especificacions més recents (com ara CSS Overflow Level 5) i funcions ben establertes com ara scroll-snap-type, ara és realista enviar carrusels llestos per a la producció que siguin ràpids, accessibles amb el teclat i resistents quan JavaScript està desactivat.

Per què el CSS modern fa que els carrusels de JavaScript siguin opcionals

Durant anys, la resposta per defecte a "com puc crear un carrusel?" va ser "agafar una biblioteca JS".Swiper, Slick, Glide, el carrusel de Bootstrap i molts altres van resoldre el problema fent malabarismes amb els detectors d'esdeveniments, els temporitzadors, els observadors de redimensionament i els rols ARIA, però també van afegir kilobytes addicionals al paquet i van introduir una altra dependència per mantenir.

Avui, CSS ha posat al dia discretament els casos d'ús més comuns del carrusel.Amb un grapat de propietats, podeu convertir un scroller horitzontal normal en una experiència paginada i ajustada a la diapositiva que funciona amb la roda del ratolí, el trackpad, les fletxes del teclat i els lliscaments tàctils. Sense listeners, sense reflows causats per la lògica JS i sense condicions de carrera amb hidratació en frameworks.

La idea bàsica és simple: tractes el teu carrusel com una regió desplaçable, no com un component màgic que es teletransporta entre diapositives. El CSS llavors "ajuda" al desplaçament amb punts d'ajust, transicions suaus i, en l'especificació més recent, botons i marcadors integrats que el navegador injecta al DOM com a elements interactius reals.

Aquest canvi té grans conseqüències per al rendiment i la resiliènciaUn carrusel CSS encara funciona perfectament quan JS està bloquejat, no es carrega o l'usuari el desactiva. El motor de desplaçament del navegador fa la major part de la feina pesada, que està altament optimitzat en tots els motors principals i ajustat per a dispositius de baix consum i eines d'accessibilitat.

A més d'això, funcions CSS com ara :has(), el disseny de quadrícula i les animacions impulsades per desplaçament es connecten a la mateixa àrea de desplaçament, permetent-vos crear indicadors de diapositives sofisticats, revelacions de contingut o paral·laxi sense fusionar tres sistemes diferents (el vostre codi, la lògica de la biblioteca i el desplaçament del navegador) de maneres fràgils.

Bloc de construcció principal: Scroll Snap per a carrusels només de CSS

Al cor d'un carrusel només de CSS hi ha el mòdul Scroll Snap., que permet definir punts "magnètics" on s'ha de bloquejar la posició de desplaçament després que un usuari deixi de desplaçar-se. En comptes d'aterrar a mig camí entre dues diapositives, la vista s'ajusta a la més propera, donant la sensació clàssica de control lliscant.

L'estructura HTML pot ser mínima: un contenidor que es desplaça horitzontalment, a més d'una sèrie d'elements de diapositiva a l'interior. Ni tan sols cal donar a cada imatge o targeta la seva pròpia classe si el marcatge és coherent, tot i que anomenar els elements sovint ajuda a l'estil i l'accessibilitat:

Exemple d'estructura per a un carrusel d'imatges bàsic es podria conceptualitzar com un embolcall com <ul class="carousel"> amb múltiples <li> elements, cadascun dels quals conté una imatge o una targeta. La màgia rau en el CSS:

Defineixes el contenidor com un disseny flexible horitzontal amb el desplaçament habilitat. i especifiqueu que s'ha de fixar al llarg de l'eix x:

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

Cada diapositiva individual exposa una posició d'encaix, normalment al centre o a l'inici de la finestra gràfica, i estableix una base fixa perquè n'apareguin un o diversos per vista:

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

Aquest patró ja et dóna un carrusel sorprenentment complet: els usuaris poden lliscar al mòbil, desplaçar-se amb el ratolí o el trackpad i la finestra gràfica sempre es fixarà a la diapositiva més propera. No hi ha cap JS que supervisi els esdeveniments de desplaçament ni que ajusti manualment les posicions.

Per crear carrusels de diversos elements (com ara tires de productes), només cal modificar la base flexible.Per exemple, podeu mostrar tres elements per vista amb una mica d'espaiat utilitzant alguna cosa com ara flex: 0 0 calc(33.333% - 1rem) més els marges laterals. A Scroll Snap no li importa si cada "pàgina" és una sola diapositiva d'amplada completa o un grup de targetes més petites.

Propietats com ara object-fit: cover són útils quan es treballa amb imatges en brut, garantint que omplin l'àrea de la diapositiva sense estirar-se. Combinat amb una relació d'aspecte fixa, podeu obtenir carrusels d'imatges que es mantenen visualment consistents en qualsevol mida de pantalla.

Des de simples desplaçadors fins a carrusels amb sensació nativa

Un carrusel de desplaçament simple ja sembla agradable, però les especificacions modernes ho porten més enllà., especialment a Chrome 135+ on l'esborrany de nivell 5 de CSS Overflow comença a aparèixer com a característiques reals. L'especificació tracta un carrusel com una àrea de desplaçament amb una interfície d'usuari opcional generada pel navegador al seu voltant.

En aquest model, un "carrusel" equival a: un scroller més fins a dos conjunts d'affordances.—botons de desplaçament i marcadors de desplaçament. Tots dos són creats per pseudoelements CSS, però el navegador emet germans DOM reals al costat del desplaçador, de manera que es comporten com a controls nadius.

Crucialment, el navegador connecta la semàntica, l'ordre del focus i la gestió de l'estat per a tu.Els elements injectats tenen les funcions adequades, es poden tabular en un ordre raonable i reflecteixen la posició de desplaçament actual. Això vol dir que replicar el mateix nivell d'accessibilitat amb una biblioteca JS creada a mà no és trivial; necessitaríeu els atributs ARIA, el comportament del grup de focus, la navegació del teclat i els anuncis de regions en directe treballant junts.

Fins i tot si encara no esteu preparats per confiar en les parts experimentals, aquesta direcció és important.Això indica que els carrusels, les pestanyes, els components scrollspy i patrons d'IU similars s'estan elevant a la categoria de "ciutadans de primera classe" en CSS, cosa que reduirà constantment la necessitat de codi d'enganxament JavaScript personalitzat.

El resultat final és una línia de base més robusta per a tots els usuaris—incloses les persones que desactiven JS, depenen de tecnologia assistiva, tenen dispositius de baix consum o naveguen en condicions de xarxa inestables. El desplaçament natiu més l'estil CSS superen els widgets amb molts scripts en tots aquests escenaris.

Afegir botons de desplaçament amb ::scroll-button()

En algunes plataformes ja veieu petites fletxes al costat de les barres de desplaçament, però el nou ::scroll-button() El pseudo-element va un pas més enllà i permet que el CSS defineixi botons "anterior/següent" dedicats per a qualsevol àrea desplaçable, inclosos els carrusels.

Aquests botons de desplaçament definits per CSS es comporten de manera diferent de les fletxes de la barra de desplaçament de la vella escola.En comptes de moure el contingut en petits increments, salten aproximadament un 85% de l'àrea visible per clic. En un carrusel d'amplada completa i alineat amb ajust, això sembla gairebé exactament un botó de navegació per diapositiva.

Si realment necessiteu un moviment exacte d'un sol element, podeu combinar les opcions de desplaçament.Una recepta típica és scroll-snap-type: x mandatory al contenidor i scroll-snap-stop: always a cada fill de snap. D'aquesta manera, només prémer el botó de desplaçament et portarà d'una carta a la següent.

Des d'una perspectiva sintàctica, afegir botons de desplaçament s'assembla molt a donar estil a altres pseudoelements.Trieu l'element desplaçable (per exemple, .carousel) i objectiu ::scroll-button(left) or ::scroll-button(right) per representar controls enrere i endavant. Un exemple mínim:

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

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

El valor del contingut separat per barra permet proporcionar una etiqueta visual i accessible.El navegador crea llavors imatges reals <button> nodes com a germans de la vostra àrea de desplaçament i hi col·loca el vostre contingut. Sou lliures de posicionar-los i donar-los estil com vulgueu, igual que qualsevol altre element, utilitzant el posicionament absolut, la quadrícula CSS o fins i tot el posicionament d'àncora.

L'estil de focus encara importa aquíPer exemple, aplicant una regla com ara .carousel::scroll-button(*):focus-visible { outline-offset: 5px; } garanteix que quan els usuaris premeu el tabulador per arribar a aquests botons, vegin un anell de focus clar desplaçat respecte a la vora de l'element, preservant la usabilitat del teclat i el compliment de les normes WCAG.

Sota el capó, el navegador fa un seguiment de l'estat del botó i del rang de desplaçament disponible.Això vol dir que no us heu de preocupar de desactivar el botó "anterior" quan esteu a la primera diapositiva o el botó "següent" al final; la plataforma pot gestionar aquestes condicions de manera estandarditzada.

Marcadors de desplaçament amb ::scroll-marker() per a la navegació per vinyetes o etiquetes

Els marcadors visuals (punts o miniatures sota el carrusel) són gairebé esperats pels usuaris avui dia.. El nou ::scroll-marker() pseudo-element et permet generar aquests indicadors estrictament amb CSS, cadascun vinculat a un element específic de la llista desplaçable.

A diferència de la miniatura de la barra de desplaçament, els marcadors de desplaçament representen punts d'interès semàntics.Cada marcador no només correspon a una posició en píxels, sinó a un element fill real, cosa que el fa ideal per a escenaris com ara temporades d'una sèrie de televisió, categories de productes o capítols lògics d'una història en lloc de cada fotograma.

Els marcadors apareixen com a vàlids <a> elements, oferint-vos dues funcions importants de manera gratuïta: navegació dins de la pàgina i semàntica correcta per als lectors de pantalla. Es comporten de manera molt similar als enllaços d'àncora, però amb algunes millores adaptades a l'ús del carrusel.

Entre aquestes millores hi ha la :target-current pseudo-classe, que coincideix quan l'element corresponent està actualment enganxat a la vista o es considera "la diapositiva activa". Podeu utilitzar-lo per ressaltar el marcador actiu amb un fons o una vora diferents.

Per connectar això, primer defineixes on ha d'estar el grup de marcadors. usant el scroll-marker-group propietat al contenidor, normalment abans o després del desplaçador. Per exemple, scroll-marker-group: after; col·locaria els marcadors després de la regió del carrusel al DOM.

A continuació, us centreu en els fills individuals que haurien de generar marcadors.Si les teves diapositives són <li> elements, alguna cosa així com .carousel > li::scroll-marker ho farà. Un patró comú és crear punts buits:

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

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

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

El navegador s'encarrega de generar el <a> marcadors, agrupant-los en un contenidor dedicat ::scroll-marker-groupi exposant-los com a elements navegables pel teclat que es comporten com un grup de discussió. Els lectors de pantalla els poden presentar de manera similar a una llista de pestanyes: moveu el focus entre els marcadors i els activeu per saltar a una diapositiva concreta.

Els marcadors no es limiten als punts. Podeu configurar content als números ("1", "2", etc.), etiquetes llegibles per humans com ara "Temporada 1" o "Capítol 3", o fins i tot imatges en línia per crear galeries de miniatures per a dissenys amb molts fotos, com ara galeries de productes de comerç electrònic.

Combinant botons, marcadors i estratègies de reserva

Quan barreges botons de desplaçament i marcadors a sobre d'un carrusel de desplaçament i ajust, obtens un component que sembla indistingible d'una solució JS., però és més fàcil de mantenir i inclou menys peces mòbils. Els usuaris poden fer clic a fletxes, tocar vinyetes, lliscar el dit a les pantalles tàctils o utilitzar la navegació amb teclat, tot amb un comportament coherent.

Aquesta combinació també aborda els problemes comuns de rendiment i UX.Com que cap script coordina els canvis de diapositiva, no es produeix cap alteració del disseny a causa del manual. scrollLeft ajustos o temporitzadors que s'activen en moments incòmodes. El CLS (Cumulative Layout Shift - Canvi de disseny acumulatiu) es redueix, ja que l'arbre DOM està a punt des del principi i no s'injecten ni es mesuren elements al final del cicle de vida.

Tanmateix, hi ha una pega: ::scroll-button i ::scroll-marker encara són experimentals. i actualment només aterren a Chrome 135+ darrere de banderes experimentals. Això vol dir que cal dissenyar alternatives elegants si es vol utilitzar en llocs de producció.

Detecció de característiques mitjançant @supports és el teu millor aliat aquíPodeu renderitzar una barra de navegació tradicional: enllaços a #slide1, #slide2 i així successivament, per defecte, i després amagar-lo quan els controls nadius estiguin disponibles. Un patró conceptual aproximat té aquest aspecte:

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

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

En l'HTML, una simple navegació amb enllaços d'àncora és suficient.: cada diapositiva rep un id, i la navegació apunta a aquests ID. Saltar a una àncora dins d'un contenidor d'ajust de desplaçament s'integra perfectament amb el comportament d'ajust, de manera que la diapositiva s'ajusta perfectament després del salt.

Això vol dir que podeu gaudir dels avantatges dels pseudoelements experimentals en els navegadors compatibles.—botons, marcadors i ganxos d'estat de desplaçament completament natius—, tot oferint una experiència totalment funcional en altres llocs. Cap usuari es queda encallat amb un control lliscant inutilitzable.

A més a més, tot això encara funciona quan JavaScript està desactivat., perquè depeneu únicament de les àncores HTML, el comportament de desplaçament del CSS i el motor de desplaçament del navegador. Per a molts patrons d'UX (galeries, cronologies, aparadors pas a pas), això és més que suficient.

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

Una característica comuna que la gent espera dels carrusels és la reproducció automàtica—les diapositives avancen automàticament després d'uns segons. Tot i que això s'implementa sovint amb temporitzadors de JavaScript, també podeu aproximar aquest comportament mitjançant animacions CSS pures.

El truc és animar la transformació d'una fila flexible que conté totes les diapositives.Per a un nombre fix de diapositives, definiu una línia de temps de fotogrames clau on la pista roman a cada posició de la diapositiva durant un temps i després salta a la següent. Quelcom semblant a:

@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); } }

A continuació, apliqueu aquesta animació al contenidor que conté els elements de la diapositiva, p. ex. .autoplay-carousel { display: flex; animation: slide 12s infinite; }Els intervals de percentatge defineixen els temps de "permanència" a cada diapositiva perquè el contingut sigui llegible abans de continuar.

És crucial afegir una manera perquè els usuaris puguin pausar la reproducció automàticaUn patró senzill però efectiu és fer una pausa en passar el cursor per sobre amb .autoplay-carousel:hover { animation-play-state: paused; }, de manera que els usuaris d'escriptori poden aturar el moviment quan interactuen amb el contingut.

Les consideracions d'accessibilitat van encara més enllà amb les preferències de movimentRespectant prefers-reduced-motion es considera una bona pràctica, de manera que podeu desactivar l'animació completament per als usuaris que prefereixen menys moviment:

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

Tot i que les solucions de reproducció automàtica de CSS no poden gestionar fàcilment tots els casos límit que JS pot—com ara els recomptes de diapositives realment dinàmics o la lògica complexa de pausa/repren-hi impulsada per l'usuari— són sorprenentment sòlids per a carrusels estàtics simples quan voleu evitar completament els scripts.

Comparació de carrusels només de CSS i JavaScript

Decidir entre CSS i JavaScript per a un carrusel no és una proposta de tot o res; depèn dels vostres requisits, públic i pressupost de manteniment. Però la balança ha canviat considerablement a favor del CSS per a molts escenaris del món real.

Des del punt de vista del rendiment, els carrusels CSS són els clars guanyadors.No hi ha anàlisi ni execució de codi de biblioteca, no hi ha detectors d'esdeveniments en cada interacció de desplaçament i no hi ha recàlculs de disseny en temps d'execució activats per ajustos de script. El motor de desplaçament del navegador està escrit en codi natiu altament optimitzat i ajustat per a tot, des d'ordinadors d'escriptori d'alta gamma fins a telèfons de baix consum.

Pel que fa a l'accessibilitat, les noves funcions del carrusel CSS eleven el llistó significativament.Els botons de desplaçament i els marcadors proporcionats pel navegador vénen preconfigurats amb rols ARIA, comportament del teclat i anuncis que, d'altra manera, s'haurien de recrear meticulosament en JavaScript. Fins i tot sense aquests, un carrusel de desplaçament-snap encara es pot fer accessible amb rols i etiquetes.

D'altra banda, JavaScript continua sent útil per a patrons molt avançats.Si necessiteu una lògica de reproducció automàtica elaborada, ganxos d'anàlisi, física personalitzada o sincronitzar diversos carrusels amb estat compartit (per exemple, imatge principal més fila de miniatures més paginació externa), els enfocaments basats en scripts encara poden ser més flexibles.

Tanmateix, la idea clau és que molts carrusels "quotidians" no necessiten realment aquest nivell de complexitat.Una galeria de productes senzilla, un control lliscant de testimonis o una franja de "publicacions destacades" normalment es poden implementar amb l'ajust de desplaçament, algunes regles CSS i controls nadius opcionals, cosa que us estalvia haver d'utilitzar una dependència de 50 KB només per moure'us entre tres diapositives.

Una altra consideració és la resiliència quan JavaScript falla.Els carrusels només de CSS continuen funcionant perfectament si JS està bloquejat per un proxy corporatiu, trencat per un bloquejador d'anuncis o simplement encara no s'ha carregat quan l'usuari arriba a la pàgina. Aquest tipus de degradació elegant és difícil d'aconseguir amb biblioteques que depenen d'una fase d'inicialització després de la càrrega de la pàgina.

Bones pràctiques d'accessibilitat per a carrusels CSS

Fins i tot si el navegador ajuda amb alguns aspectes d'accessibilitat, tu encara hi jugues un paper crucial. per fer que el vostre carrusel CSS sigui utilitzable per a tothom. La semàntica, la gestió del focus i la sensibilitat al moviment haurien d'estar al capdavant de la vostra ment.

Primer, doneu al carrusel un punt de referència adequat. Embolicant-ho en un element amb role="region" i descriptiu aria-label com ara "Galeria de productes" o "Articles destacats", facilita que els usuaris de lectors de pantalla ho trobin i ho entenguin.

Cada diapositiva també pot portar una etiqueta accessible, per exemple a través de aria-label indicant "Diapositiva 1 de 3", "Diapositiva 2 de 3", etc. D'aquesta manera, quan un usuari arriba a una diapositiva, obté un context immediat sobre la seva posició a la seqüència.

No us oblideu dels indicadors d'enfocament visiblesQualsevol element interactiu, ja sigui un ::scroll-button, un ::scroll-marker-enllaç generat o una àncora manual a la navegació alternativa: necessita un estil d'enfocament clar que respecti les directrius de contrast i que no s'elimini amb els restabliments globals.

Si feu servir animacions de reproducció automàtica o de desplaçament, respecteu les preferències de moviment.. Utilitzant prefers-reduced-motion Desactivar o simplificar les animacions no és opcional si us preocupeu pels usuaris propensos al mareig, i és prou fàcil incloure els efectes més intensos en una consulta multimèdia.

Finalment, tingueu en compte les mides dels objectius tàctilsTant si esteu aplicant estil als marcadors de desplaçament natius com als vostres propis enllaços de navegació, manteniu les àrees interactives d'almenys uns 44 × 44 píxels CSS. Això normalment significa un farciment i un espaiat generosos en lloc de cercles petits molt junts.

Fluxs de treball, eines i direccions futures del món real

Per facilitar l'experimentació amb carrusels CSS, alguns equips han creat eines de configuració en directe. on podeu activar interruptors (activar botons de desplaçament, activar marcadors, ajustar modes d'ajust) i veure immediatament el CSS actualitzat necessari per a aquesta configuració. Aquests parcs infantils són fantàstics per aprendre experimentant.

Juntament amb els configuradors, galeries seleccionades de demostracions de carrusel només per a CSS mostren les possibilitats.Hi trobareu patrons com ara interfícies amb pestanyes, navegació amb desplaçament, diapositives basades en passos, galeries de miniatures i molt més, tots compartint la mateixa base d'àrees de desplaçament a més de controls d'ajustament i opcionals.

Molts d'aquests llocs de demostració s'envien intencionadament sense JavaScript. per demostrar-ho: una interfície d'usuari rica i interactiva és totalment possible només amb HTML i CSS. Sovint exposen les seves utilitats a través de @layer declaracions, de manera que podeu inspeccionar i seleccionar estils que s'adaptin al vostre propi sistema de disseny.

De cara al futur, la plataforma CSS ja està treballant en dues importants vies d'evolucióEl primer és "porta els teus propis elements", on en comptes de confiar en botons i marcadors generats pel navegador, podràs connectar els teus propis elements. <a> i <button> marcatge, tot i que es beneficia de la lògica de desplaçament subjacent.

Això obriria la porta a controls de marca i amb un estil ric creats amb marcs d'utilitat. com Tailwind, tot mantenint la semàntica i el comportament governats per la plataforma. Essencialment, decoraríeu la interfície d'usuari però deixaríeu que el navegador continués sent el cervell de l'operació.

La segona gran àrea és el desplaçament cíclic o infinitMolts carrusels actuals "embolcallen" quan arribes al final, tornant sense problemes a la primera diapositiva. Implementar-ho de manera neta és complicat, ja que sovint implica contingut duplicat o lògica complexa. La compatibilitat a nivell de plataforma amb el desplaçament cíclic permetria als navegadors gestionar el comportament encapsulador de manera més elegant i eficient.

A mesura que aquestes funcions maduren i s'estenen més enllà de Chrome a altres motors, la bretxa entre el que pot fer un "carrusel CSS natiu" i el que ofereixen les biblioteques JavaScript de gran pes continuarà reduint-se, convertint els enfocaments sense scripts en el punt de partida per defecte en lloc d'un experiment de casos límit.

En definitiva, el CSS modern us dóna tots els motius per repensar com creeu carrusels.Començant amb un disseny senzill de desplaçament i ajustament, afegint capes de botons i marcadors experimentals on sigui possible i escampant les millors pràctiques d'accessibilitat, podeu oferir controls lliscants responsius, suaus i robustos sense recórrer a una dependència de JS. Per a molts projectes, això significa pàgines més ràpides, menys codi per mantenir i una experiència més resilient per a tots els usuaris.