Marquee

An endless strip that moves all the time, like the old <marquee> tag, at the speed you choose. Logos, tickers, tag clouds.

Import

import { marquee } from '@andresclua/sliderkit-plugins'

Options

Option	Type	Default	Description
`speed`	number	`60`	Pixels per second.
`direction`	`'left' \| 'right'`	`'left'`	Which way the content travels.
`pauseOnHover`	boolean	`true`	Stop while the cursor is over the strip.
`hoverSpeed`	number	—	Pixels per second under the cursor, eased in and out. Faster, slower or `0`. Overrides `pauseOnHover`.
`scrollBoost`	number	`0`	Speeds up while the page scrolls: px/s added per px/s of scroll (try `1.5`). Eases back when you stop. Capped at 2000 px/s extra.
`pauseOnFocus`	boolean	`true`	Stop while something inside has keyboard focus.
`draggable`	boolean	`false`	Drag it sideways with pointer or touch. It keeps its momentum on release and eases back to `speed`.

Basic example

import { Slider } from '@andresclua/sliderkit'
import { marquee } from '@andresclua/sliderkit-plugins'

new Slider('#logos', {
  items: 4,
  loop: true,
  touch: false,
  mouseDrag: false,
  speed: 0,
  plugins: [marquee({ speed: 50 })],
})

Speed up on hover, and drag

marquee({ speed: 50, hoverSpeed: 300 })      // faster under the cursor
marquee({ speed: 50, draggable: true })      // grab it and drag either way

Slides of different widths

new Slider('#tags', {
  autoWidth: true,
  loop: true, touch: false, mouseDrag: false, speed: 0,
  plugins: [marquee({ speed: 40 })],
})

Behaviour notes

Needs loop: true and more slides than items. With only a few slides, repeat them in the HTML so the strip is wider than the viewport.
Set touch: false and mouseDrag: false: the plugin moves the track itself, so the core's drag would fight it. For dragging, use draggable: true. For dragging, use draggable: true.
Every real slide stays reachable by keyboard and screen readers, because they all pass through the view. The loop clones stay hidden.
The loop only runs while the strip is on screen and not paused, and it does not start if the visitor has prefers-reduced-motion: reduce.
Slides can have different widths: set autoWidth: true and each one is as wide as its content (tags, logos, headlines). The plugin measures the real length of one loop, so nothing overlaps. Without it, slides share the width given by items.
The slides plus the loop clones must be wider than the viewport. With autoWidth and just a few short slides, repeat them in the HTML.
Horizontal only.

Demo

Marquee demos