InfiniteSideScroll Tests

go home

standard marquee

marqueeSpeed=1, left-to-right, drag to interrupt

A
B
C
D
E

reversed marquee

marqueeSpeed=1, right-to-left

A
B
C
D
E

snap mode (no marquee)

default — drag or scroll horizontally to snap to nearest item

A
B
C
D
E

no snap

disableSnap — drag freely without snapping

A
B
C
D
E

with arrow buttons

ArrowButton — single button auto-flipped for back and forward

A
B
C
D
E

disabled drag

disableDrag + marqueeSpeed=1 — cannot be dragged or scrolled manually

A
B
C
D
E

centerMode off

centerMode=false — first item starts from the left instead of center

A
B
C
D
E

scroll velocity

scrollVelocity=0.5 — scrubs with vertical page scroll speed

A
B
C
D
E

onChange callback

current index: 0

A
B
C
D
E

items change size

all items toggle between 300×200 and 150×120 every 2 s — loop should recalculate seamlessly

A
B
C
D
E

mixed-size items change size

odd items are large, even items are small — sizes swap every 2 s

A
B
C
D
E

gap calculation tests

each test uses a marquee so the loop seam is always visible — check that the spacing between the last and first items matches the rest

flex gap

gap: 60px on .track (flex container)

A
B
C
D
E

margin-left on items

no flex gap — spacing comes entirely from margin-left: 60px on each item

A
B
C
D
E

margin-right on items

no flex gap — spacing comes entirely from margin-right: 60px on each item

A
B
C
D
E

grid gap

.track overridden to display: grid with column gap: 60px

A
B
C
D
E