Produktgalerie rein mit CSS lösen: Ohne JavaScript zum Bild-Karussell

1. Warum eine Produktgalerie ohne JavaScript funktionieren kann

Die meisten Magento Shops liefern für die Produktgalerie eine JavaScript-Bibliothek aus, die Thumbnails, Zoom und Karussell-Logik übernimmt. Das kostet Ladezeit, Wartungsaufwand und zusätzliche Fehlerquellen, obwohl der Browser mit Scroll Snap, dem Checkbox Hack Prinzip und der :target Pseudoklasse längst die Werkzeuge mitbringt, um eine Produktgalerie rein mit CSS zu lösen. Das Ergebnis ist keine Notlösung, sondern in vielen Fällen ein robusteres, schnelleres Nutzererlebnis, weil der Browser die Interaktion nativ behandelt statt über einen Event-Listener.

Der Denkansatz hinter einer Produktgalerie rein mit CSS ist, Interaktion über native HTML-Zustände abzubilden: versteckte Radio-Buttons steuern, welches Bild sichtbar ist, Scroll Snap sorgt für sanftes Einrasten beim Wischen, und Anker-Links mit :target ermöglichen direkte Sprünge zu einem bestimmten Bild. Die folgenden Abschnitte bauen diese Galerie Schritt für Schritt auf, von der Grundstruktur bis zur Vollbild-Ansicht, immer mit Blick auf echte Produktseiten in Magento.

2. Scroll Snap als Fundament der Galerie

Scroll Snap ist der Kern jeder modernen Produktgalerie rein mit CSS, weil es horizontales Wischen auf Mobilgeräten nativ unterstützt, ohne Touch-Events abzufangen. Der Container bekommt overflow-x: auto und scroll-snap-type: x mandatory, jedes Bild darin scroll-snap-align: center. Der Browser rastet beim Scrollen automatisch auf dem nächsten Bild ein, genau wie es Nutzer von nativen Apps erwarten, ganz ohne eine Zeile JavaScript.

Ein wichtiges Detail für eine Produktgalerie rein mit CSS: scroll-behavior: smooth zusammen mit scroll-snap-stop: always verhindert, dass der Nutzer bei schnellem Wischen mehrere Bilder auf einmal überspringt. Das ist besonders wichtig, wenn Produktbilder unterschiedliche Ansichten wie Detailaufnahmen zeigen, bei denen jedes Bild einzeln betrachtet werden soll, statt am Container vorbeizuscrollen.

/* Scroll-snap gallery container — no JavaScript needed for swipe */
.gallery-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 0;
  scrollbar-width: none; /* hide scrollbar, thumbnails handle navigation */
}

.gallery-track::-webkit-scrollbar {
  display: none;
}

.gallery-track > .gallery-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.gallery-slide img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

3. Thumbnail-Navigation mit dem Checkbox Hack

Klickbare Thumbnails, die das Hauptbild wechseln, sind das zweite tragende Element jeder Produktgalerie rein mit CSS. Der Checkbox Hack nutzt versteckte input type="radio" Elemente, deren Zustand über die :checked Pseudoklasse und den allgemeinen Geschwister-Kombinator ~ gelesen wird. Jedes Thumbnail ist ein label, das auf ein Radio-Input verweist, jedes Hauptbild reagiert per CSS darauf, welches Radio-Input aktuell ausgewählt ist.

Der entscheidende Vorteil dieses Musters in einer Produktgalerie rein mit CSS: Radio-Buttons sind nativ fokussierbar und mit Pfeiltasten navigierbar, wenn sie in einer fieldset gruppiert sind. Das liefert Tastatur-Zugänglichkeit quasi kostenlos mit, ohne eigene keydown Handler schreiben zu müssen, wie es bei den meisten JavaScript-Galerien nötig wäre.

<!-- Checkbox hack: hidden radios drive which image is visible -->
<div class="gallery">
  <input type="radio" name="gallery-img" id="img-1" class="gallery-radio" checked>
  <input type="radio" name="gallery-img" id="img-2" class="gallery-radio">
  <input type="radio" name="gallery-img" id="img-3" class="gallery-radio">

  <div class="gallery-stage">
    <img src="product-1.webp" alt="Product front view" class="gallery-image" data-slot="1">
    <img src="product-2.webp" alt="Product side view" class="gallery-image" data-slot="2">
    <img src="product-3.webp" alt="Product detail view" class="gallery-image" data-slot="3">
  </div>

  <div class="gallery-thumbs">
    <label for="img-1" class="gallery-thumb"><img src="product-1-thumb.webp" alt=""></label>
    <label for="img-2" class="gallery-thumb"><img src="product-2-thumb.webp" alt=""></label>
    <label for="img-3" class="gallery-thumb"><img src="product-3-thumb.webp" alt=""></label>
  </div>
</div>

4. Direkte Sprünge mit der :target Pseudoklasse

Neben dem Checkbox Hack bietet die :target Pseudoklasse einen alternativen Ansatz für eine Produktgalerie rein mit CSS, besonders wenn Bilder auch über direkte URL-Anker verlinkbar sein sollen, etwa aus einer Produktbeschreibung heraus, die auf ein bestimmtes Detailbild verweist. Jedes Galerie-Bild bekommt eine eigene id, Links mit href="#bild-2" setzen den URL-Hash, und :target matcht das Element, dessen id aktuell im Hash steht.

Der Unterschied zum Checkbox Hack: :target reagiert auf den URL-Hash und ist damit auch nach einem Seiten-Reload oder beim direkten Teilen eines Links über den Hash-Anker aktiv. Für eine Produktgalerie rein mit CSS, die Deep-Links zu einzelnen Produktbildern unterstützen soll, ist das oft die bessere Wahl als reine Radio-Buttons, die nach einem Reload immer auf den Standardzustand zurückfallen.

/* :target based gallery — supports deep links like #view-detail */
.gallery-panel {
  display: none;
}

.gallery-panel:target,
.gallery-panel:first-of-type:not(:target ~ .gallery-panel) {
  display: block;
}

/* Highlight the active thumbnail link when its target is active */
.gallery-thumb-link:has(+ #view-detail:target) {
  outline: 2px solid var(--color-brand-600, #7c3aed);
}

5. Fortschritts-Indikatoren ohne JavaScript zählen

Ein sichtbarer Fortschritts-Indikator, zum Beispiel Punkte unter dem Karussell, gehört für viele Nutzer zur erwarteten Bedienlogik einer Produktgalerie rein mit CSS. Da der aktuelle Zustand bereits über :checked oder :target bekannt ist, lassen sich die Indikator-Punkte einfach über Geschwister-Selektoren an denselben Zustand koppeln. Ein aktiver Punkt bekommt eine andere Hintergrundfarbe, sobald das zugehörige Radio-Input aktiv ist, komplett ohne einen Counter in JavaScript mitzuzählen.

Bei vielen Bildern wird die reine CSS-Selektor-Kette allerdings unübersichtlich, weil für jedes Bild ein eigener Selektor mit dem passenden Geschwister-Kombinator nötig ist. In der Praxis funktioniert das gut bis etwa acht bis zehn Bilder, was für die meisten Produktgalerien im E-Commerce ausreicht. Darüber hinaus lohnt sich der Wechsel zu einem generierten Stylesheet über den Server, das die Selektoren automatisch für die tatsächliche Bildanzahl erzeugt.

6. Vollbild-Ansicht als reines CSS Overlay

Eine Vollbild-Ansicht beim Klick auf das Hauptbild lässt sich in einer Produktgalerie rein mit CSS über dasselbe :target Muster realisieren, das für die Deep-Links genutzt wird. Ein Link mit href="#zoom-1" aktiviert ein Overlay-Element, das per position: fixed den gesamten Viewport bedeckt und das Bild in voller Auflösung zeigt. Ein zweiter Link mit href="#" innerhalb des Overlays setzt den Hash zurück und schließt damit die Ansicht wieder.

Für eine ruhige Nutzererfahrung sorgt eine transition auf opacity und visibility, kombiniert mit einer kurzen Verzögerung über transition-delay beim Schließen, damit das Overlay erst unsichtbar wird, nachdem die Ausblend-Animation abgeschlossen ist. Diese Technik macht die Produktgalerie rein mit CSS vollständig, weil selbst die Zoom-Funktion, die in vielen Shops eine eigene Lightbox-Bibliothek erfordert, ohne zusätzlichen JavaScript-Code auskommt.

7. Barrierefreiheit: Tastatur und Screenreader beachten

Barrierefreiheit ist bei einer Produktgalerie rein mit CSS kein Nebenschauplatz, sondern oft sogar ein Vorteil gegenüber JavaScript-Lösungen, weil native Formularelemente wie Radio-Buttons von Screenreadern automatisch korrekt als Gruppe mit aktuellem Auswahlzustand angesagt werden. Wichtig ist, die Radio-Inputs nicht mit display: none zu verstecken, weil das sie auch für Screenreader entfernt, sondern mit einer visuell versteckenden Klasse, die die Elemente im Accessibility Tree erhält.

Zusätzlich sollte jedes Thumbnail-Label über ein aria-label beschreiben, welches Bild es aktiviert, zum Beispiel "Produktansicht 2 von 5 anzeigen". Für das :target basierte Zoom-Overlay ist ein sichtbarer, gut erreichbarer Schließen-Button mit ausreichendem Kontrast Pflicht, da Tastatur-Nutzer sonst keinen offensichtlichen Weg haben, das Overlay ohne Maus zu verlassen. Diese Details entscheiden, ob eine Produktgalerie rein mit CSS tatsächlich für alle Nutzer funktioniert oder nur optisch überzeugt.

/* Visually hide radio inputs, keep them in the accessibility tree */
.gallery-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visible focus ring on the associated thumbnail label */
.gallery-radio:focus-visible + .gallery-thumb {
  outline: 3px solid var(--color-brand-600, #7c3aed);
  outline-offset: 2px;
}

8. Grenzen der CSS-only Produktgalerie

So leistungsfähig eine Produktgalerie rein mit CSS auch ist, sie hat klare Grenzen. Ein automatischer Bilderwechsel im Sekundentakt lässt sich zwar über CSS Animationen mit animation-timeline annähern, ein pausierbarer, vom Nutzer steuerbarer Autoplay-Timer erfordert aber echten JavaScript-Code, weil CSS keinen Zugriff auf Nutzerinteraktion außerhalb von Hover, Fokus und Klick-Zuständen hat.

Auch dynamisch nachgeladene Bilder, etwa bei einer Produktgalerie, die Varianten-Bilder per Ajax nachlädt, sprengen den reinen CSS-Ansatz, weil neue Radio-Inputs und Labels zur Laufzeit ins DOM eingefügt werden müssten. In solchen Fällen ist ein hybrider Ansatz sinnvoll: die Grundgalerie bleibt CSS-only, und ein kleines Alpine.js Snippet übernimmt nur das Nachladen zusätzlicher Bilder, ohne die bestehende CSS-Logik zu ersetzen.

9. CSS-only vs. JavaScript-Galerie im direkten Vergleich

Die Entscheidung zwischen einer Produktgalerie rein mit CSS und einer klassischen JavaScript-Bibliothek hängt stark von den funktionalen Anforderungen ab, aber in den meisten Standard-Produktgalerien im E-Commerce reicht der CSS-Ansatz vollständig aus, wie die Tabelle in Abschnitt fünf gezeigt hat. Der entscheidende Vorteil bleibt die Ladezeit: keine zusätzliche JavaScript-Datei, kein Parsing-Overhead, keine Layout-Verschiebung durch nachträgliche Hydration.

Gerade auf Produktlistenseiten mit vielen Produktkarten, die jeweils eine eigene Mini-Galerie im Hover-Zustand zeigen, macht sich der Unterschied deutlich bemerkbar. Hundert JavaScript-initialisierte Galerien auf einer Kategorieseite kosten spürbar Rechenzeit beim ersten Rendern, während hundert CSS-only Galerien den Browser praktisch nicht zusätzlich belasten, weil die Logik bereits Teil der normalen Style-Berechnung ist.

10. Zusammenfassung

Eine Produktgalerie rein mit CSS zu lösen ist kein Kompromiss, sondern in den meisten Standardfällen die schnellere und robustere Alternative zu einer JavaScript-Bibliothek. Scroll Snap übernimmt das Wischverhalten auf Touch-Geräten, der Checkbox Hack steuert die Thumbnail-Auswahl, und :target ermöglicht sowohl Deep-Links zu einzelnen Bildern als auch ein Vollbild-Overlay für die Zoom-Funktion.

Die Grenzen liegen bei Autoplay-Timern und dynamisch nachgeladenen Bildern, wo ein hybrider Ansatz mit einem kleinen Alpine.js Zusatz sinnvoller ist als ein rein CSS-basiertes Konstrukt. Für die überwiegende Mehrheit der Produktseiten im Magento Umfeld reicht die Produktgalerie rein mit CSS aber vollständig aus und spart messbar Ladezeit gegenüber jeder externen Slider-Bibliothek.

11. FAQ: Produktgalerie rein mit CSS