Skip to main navigation Skip to main content Skip to page footer

KKS-30 — Gallery Slider

Figma 303-18719, die orange Bildergalerie-Bahn. Die drei Slides messen 500 / 219 / 500 bei durchgehend 317px Höhe — also echte Crops mit unterschiedlichem Seitenverhältnis, keine feste Slide-Breite und kein Spaltenbruchteil. Deshalb bestimmt hier das Seitenverhältnis die Breite bei fixer Höhe.

Die Abstände sind zweimal gemessen: 620 − 600 = 20 und 859 − 839 = 20 — der 20px-Gutter aus KKS-25, den KKS-13, KKS-21 und KKS-31 unabhängig bestätigt haben. Kein neues Token.

Die Spur beginnt an der Inhaltskante (100) und endet bei 1359 — sie läuft also 79px über den 1280er Rahmen hinaus. KKS-13 hat dieselbe Signatur notiert (»~81px shows PAST the box«): der Anschnitt rechts ist das Signal, dass es scrollt. Deshalb blutet die Spur einseitig nach rechts, nicht symmetrisch.

Umgesetzt über frame_layout = galleryslider statt über ein neues Template: Partials/Media/Gallery.html wird von rund 15 Templates geteilt (Image, alle Textpic-/Textmedia-Ausrichtungen, Accordion, Timeline). Diese Variante ändert kein einziges Template — sie stylt das vorhandene Markup um, und das Skript injiziert die Punkte.

Kein Bootstrap-Carousel: das Design zeigt mehrere Slides gleichzeitig mit Anschnitt, was ein Carousel nicht abbilden kann. Es ist dieselbe Scroll-Snap-Mechanik wie KKS-13 — und dieselbe Skriptdatei, die KKS-30 verallgemeinert statt kopiert hat.

var t = document.querySelector('#c93010 .gallery-row'), i = t.querySelector('.gallery-item');
[Math.round(i.getBoundingClientRect().height), getComputedStyle(t).columnGap].join(' | ');
// expect "317 | 20px" ab lg

Hier finden Sie noch tiefere Einblicke in das Netzwerk

Bildergalerie

Kontrolle — dieselben Bilder als normales Raster

Datenschutz Einstellungen
KKSN KKSN