KKS-15 — Logo Slider

Below is the Figma component Mitglieder Slider (instance 409-10580) rebuilt on the Mask multislider element: a primary frame carrying the navy band, the fancy subheader as the mint eyebrow pill, and eight member logos on a looping track.

It is a marquee, not a carousel. The component’s four variants are the same eight logos shifted left by exactly one each, and the list repeats inside a single row — logo-uniklinik-rwth-aachen 1 sits at Left 115 and … 2 at Left 2073, so one loop period is 1958px. There are no arrows and no dots anywhere in the design. The track is therefore two identical copies of the list translated -50%: no JavaScript, and no fifth slider library.

Geometry is measured, not guessed. The eight logos sum to 1345px wide, so 1958 − 1345 = 613 over eight slots is a 76.6px gap; with every logo capped at 170px the pitch is 170 + 75 and 8 × 245 = 1960, 2px over Figma. The band is 24 + 24 + 115 + 26 = 189px tall.

The second band below is the same list cut to four logos. Its duration halves with the count (5s per logo), so both move at the same speed — that is what the --kks-logoslider-count custom property is for.

Hovering or tabbing into a logo pauses the motion; prefers-reduced-motion: reduce stops it altogether and hands the row back as a scrollable strip, with the duplicate copy hidden so nothing is listed twice.

Measure it:

var t = document.querySelector('.kks-logoslider-track'), s = getComputedStyle(t);
[s.animationDuration, t.children.length, t.children[0].children.length].join(' | ');
// expect "40s | 2 | 8" on the first band