Marquee

Svelte

Javascript

NPM

Node.js

Opensource

Tailwind CSS

Github

A smooth, performant marquee component that scrolls its children horizontally at a constant speed. It handles resizing and pauses on hover in this demo.

Usage

<script lang="ts">
	import Marquee from '$lib/Marquee.svelte';
</script>

<Marquee speed={200} class="overflow-hidden">
	<div>Item 1</div>
	<div>Item 2</div>
	<div>Item 3</div>
</Marquee>

Props

speed: number, default 200, the speed in pixels per second at which the content scrolls.
children: snippet that renders the content to be scrolled.
Remaining HTMLDivElement props apply to the outer container (e.g., class, style, aria-*).