<lm-carousel> – Karusell / Carousel

Om komponenten

Kanonisk navn: <lm-carousel>
Synonymer: bildekarusell, slideshow, lysbildeviser, carousel
Kategori: medieinnhold
ARIA-mønster: Carousel
Parts: region, viewport, kontroller, forrige, neste, indikatorer, status
Native-first-vurdering: CSS scroll-snap (scroll-snap-type/scroll-snap-align) gir selve glide-/snap-oppførselen native, uten håndbygd animasjonslogikk. HTML har derimot ingen native karusell-widget med korrekte ARIA-roller/-etiketter og live-region-annonsering, så komponenten legger til akkurat det laget rundt en ellers ren scroll-container.
Nettleserstøtte: Bruker IntersectionObserver og CSS scroll-snap - begge bredt støttet i nyeste Chrome/Safari.
Design-tokens: var(--color-accent, ...), var(--color-surface-muted, ...), var(--color-focus-ring, ...), var(--space-2xs, ...), var(--space-small, ...), var(--space-medium, ...), var(--radius-medium, ...), var(--border-width, ...)
Sist endret: 19. september 2026
Brukt: Ikke i bruk andre steder ennå

Formål

Roterer gjennom et sett med lysbilder - bilder, kort eller sitater - med forrige/neste-knapper og punktindikatorer. Implementerer ARIA APG sitt Carousel-mønster: role="region"/aria-roledescription="karusell", hvert lysbilde får role="group"/aria-roledescription="lysbilde" med en "N av M"-etikett, og en aria-live="polite"-region annonserer gjeldende lysbilde ved navigasjon.

Egner seg for

Å vise flere likeverdige bilder/kort i et begrenset område, der brukeren aktivt blar mellom dem.
Bildegallerier tilknyttet en tur/et sted, der bare ett bilde trenger å vises om gangen.

Egner seg ikke for

Innhold som bør være synlig samtidig - en karusell skjuler alt unntatt gjeldende lysbilde, og bør ikke brukes bare for visuell variasjon.
Automatisk roterende reklame/kampanjeinnhold uten brukerkontroll - denne komponenten har bevisst ingen autoplay, siden APG krever en pause-kontroll for enhver auto-roterende karusell, og et enkelt brukerstyrt forrige/neste-mønster er tryggere som standard.

Bruk

<script type="module" src="/designsystem/komponenter/medieinnhold/carousel/carousel.js"></script>

<lm-carousel etikett="Bilder fra Roma">
    <img src="roma-1.jpg" alt="Colosseum ved solnedgang">
    <img src="roma-2.jpg" alt="Trevi-fontenen">
    <img src="roma-3.jpg" alt="Panteon innvendig">
</lm-carousel>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Attributt	Type	Standard	Beskrivelse
`etikett`	`string`	"Karusell"	Attributt/property. Beskrivende `aria-label` for hele karusellen (f.eks. "Bilder fra turen").

Slots

Slot	Beskrivelse
(standard)	Ett element per lysbilde (bilde, kort, sitat) - hvert direkte barn blir automatisk ett lysbilde.

Parts

Part	Beskrivelse
`region`	Hele karusellen (`role="region"`).
`viewport`	Den scrollbare lysbilde-flaten.
`kontroller`	Wrapperen rundt forrige/neste-knappene og indikatorene.
`forrige`	Knappen som går til forrige lysbilde.
`neste`	Knappen som går til neste lysbilde.
`indikatorer`	Wrapperen rundt punktindikatorene.
`status`	Den skjulte, live-annonserte statusteksten ("Lysbilde X av Y").

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-carousel::part(region) {
    /* egne stiler for "Hele karusellen (`role="region"`)." */
}

lm-carousel::part(viewport) {
    /* egne stiler for "Den scrollbare lysbilde-flaten." */
}

lm-carousel::part(kontroller) {
    /* egne stiler for "Wrapperen rundt forrige/neste-knappene og indikatorene." */
}

lm-carousel::part(forrige) {
    /* egne stiler for "Knappen som går til forrige lysbilde." */
}

lm-carousel::part(neste) {
    /* egne stiler for "Knappen som går til neste lysbilde." */
}

lm-carousel::part(indikatorer) {
    /* egne stiler for "Wrapperen rundt punktindikatorene." */
}

lm-carousel::part(status) {
    /* egne stiler for "Den skjulte, live-annonserte statusteksten ("Lysbilde X av Y")." */
}

Tilgjengelighet

Karusellen har role="region" og aria-roledescription="karusell". Hvert lysbilde får role="group", aria-roledescription="lysbilde" og en "N av M"-aria-label. En skjult aria-live="polite"-region annonserer gjeldende lysbilde-nummer ved navigasjon. Venstre/høyre pil (når karusellen har fokus) navigerer mellom lysbildene, i tillegg til forrige/neste-knappene og punktindikatorene.

role="region"/aria-roledescription="karusell" på hele komponenten, med en beskrivende etikett-attributt.
Hvert lysbilde får automatisk role="group", aria-roledescription="lysbilde" og aria-label="N av M" - forbrukeren trenger ikke sette dette selv.
Forrige/neste-knappene har faste aria-label-er ("Forrige lysbilde"/"Neste lysbilde"); punktindikatorene har aria-label="Gå til lysbilde N" og aria-current="true" på gjeldende.
En visuelt skjult (men ikke display: none) statuslinje med aria-live="polite" annonserer "Lysbilde X av Y" ved hver navigasjon.

Detaljer

Bruker IntersectionObserver til å oppdage hvilket lysbilde som faktisk er synlig etter en scroll-snap-navigasjon (inkludert ved ren berøringsscrolling, ikke bare knappeklikk), og holder indikatorene/live-regionen i sync med det.

Referanser

Se også:

../media-tile/index.html - brukes for enkeltstående media + tilhørende handling, ikke for en roterende samling.

Avhengigheter: Ingen