Case 2

Kampagnestribe med loop

Swiper loop: true, 10 kampagnekort med pile og pagination. Pladsnumre i loop.

Aktuelle kampagner

Case 3

Lang slider med 100 produkter

Slick, ikke uendelig, 100 produkter. Rammer grænserne 30 elementer / 15 skridt / 30 s.

Hele sortimentet (100 produkter)

Case 4

Langsomme billeder

Slick. Billedet sættes fra data-src ca. 1,5 s efter, at sliden er blevet synlig.

Produkter med langsomme billeder

Case 5

Native scroll-snap

Intet bibliotek. overflow-x: auto, scroll-snap, egne knapper med scrollBy, loading="lazy".

Populære produkter

Case 6a

Pile som <a href="#">

Swiper, hvor pilene er <a href="#">.

Udvalgt tilbehør

Case 7

Virtualiseret slider

Swiper Virtual, 40 slides, kun få i DOM'en ad gangen. Fase 2: må bare ikke fejle.

Stort udvalg (40 produkter)

Case 8

Umarkeret slider "Senest sete"

Slick med egne klassenavne. Markeres ikke Is Slider. Intet må ændre sig for den.

Senest sete

Case 10a

Hero-slider med fade

Swiper 11 i et custom element, effect: fade, autoplay 8 s, 4 bannere. Kendt svaghed: slides ligger oven i hinanden.

Case 10b

Hero-slider med slide

Samme hero som 10a, men effect: slide, til sammenligning.

Case 11

Slider med scrollbar (som Matas)

Embla Carousel med egen scrollbar (spor kan klikkes, thumb kan trækkes). Viewporten klipper ikke: wrapperen klipper med clip-path: inset(0), og nærmeste overflow: hidden er den fulde sidebredde. Promobilledet dækker slides ved siden af.