Marquee (SliderKit) example
How it works
A SliderKit slider that never stops: the marquee plugin moves the track at a steady speed. Same handler as SliderKit, one more config.
This is the second marquee in Punky. Infinite Marquee is a GSAP loop for a plain list; this one is a SliderKit slider with the marquee plugin from @andresclua/sliderkit-plugins, so it inherits the slider's loop, its accessibility (every slide stays reachable by keyboard, loop clones are hidden) and its pause when off screen or under prefers-reduced-motion. Pick it when the strip is content that should also behave as a slider; pick the GSAP one for a decorative band.
The plugin needs the core transition and drag switched off (speed: 0, touch: false, mouseDrag: false) because it moves the track itself, and loop: true. With autoWidth: true each slide takes the width of its content. The plugin demos show every variation.
The markup
<!-- The element with the hook is the slider root; every child is one slide. Repeat the slides if
a few of them do not fill the viewport: the loop needs the strip to be wider than the screen -->
<div class="c--sliderkit-c">
<div class="c--sliderkit-c__wrapper js--sliderkit-marquee" data-marquee-speed="50">
<div class="c--sliderkit-c__item"><span class="c--sliderkit-c__pill">Fast</span></div>
<div class="c--sliderkit-c__item"><span class="c--sliderkit-c__pill">Accessible</span></div>
…
</div>
</div>The handler
In src/js/handler/sliderkit/Handler.js, configMarquee reads the strip options from data-marquee-* attributes and passes them to the plugin. Leave one out and you get the plugin's default:
this.configMarquee = ({ element }) => {
const { marqueeSpeed, marqueeDirection, marqueeHoverSpeed, marqueeDraggable } = element.dataset;
return {
Manager: this.Manager,
element,
autoWidth: true,
loop: true,
touch: false,
mouseDrag: false,
speed: 0,
plugins: [
marquee({
speed: Number(marqueeSpeed) || 60, // px per second
direction: marqueeDirection || "left", // left | right
draggable: marqueeDraggable === "true",
...(marqueeHoverSpeed !== undefined && { hoverSpeed: Number(marqueeHoverSpeed) }),
}),
],
};
};What the framework does for you
- Lazy loading. The strip is built when it gets within 30px of the viewport (Boostify); SliderKit is imported once and cached by the Manager.
- Page transitions. The slider is destroyed before swup replaces the content and rebuilt on the new page.
Default
One attribute: the speed. Left to right, pauses under the cursor and on keyboard focus.
speed="50" Eight words, repeated once so the strip is wider than the viewport. data-marquee-speed is in pixels per second; the plugin default is 60.
<!-- The element with the hook is the slider root; every child is one slide. Repeat the slides if
a few of them do not fill the viewport: the loop needs the strip to be wider than the screen -->
<div class="c--sliderkit-c">
<div class="c--sliderkit-c__wrapper js--sliderkit-marquee" data-marquee-speed="50">
<div class="c--sliderkit-c__item"><span class="c--sliderkit-c__pill">Fast</span></div>
<div class="c--sliderkit-c__item"><span class="c--sliderkit-c__pill">Accessible</span></div>
…
</div>
</div>speed="50" Direction, hover and drag
The other way round, faster under the cursor instead of paused, and draggable with momentum.
direction="right"hover-speed="200"draggable="true" data-marquee-direction="right" reverses the movement. data-marquee-hover-speed replaces the pause on hover with another speed, eased in and out; 0 stops it, a bigger number races. data-marquee-draggable="true" lets the visitor grab the strip in either direction and keeps the momentum on release before easing back to the base speed.
<div class="c--sliderkit-c__wrapper js--sliderkit-marquee" data-marquee-speed="40" data-marquee-direction="right" data-marquee-hover-speed="200" data-marquee-draggable="true">direction="right"hover-speed="200"draggable="true" Options reference
The attributes the handler reads, and the plugin option each one sets.
| Attribute | Plugin option | Values | What it does |
|---|---|---|---|
data-marquee-speed | speed | number, default 60 | Pixels per second |
data-marquee-direction | direction | left (default) or right | Where the content moves |
data-marquee-hover-speed | hoverSpeed | number | Speed under the cursor, eased. Overrides the pause on hover |
data-marquee-draggable | draggable | true or false (default) | Pointer and touch dragging with momentum |
The plugin also has pauseOnHover and pauseOnFocus, both true by default and not exposed as attributes. The full list and the behaviour notes are in the plugin docs.