Svelte-fast-marquee NPM

Svelte Fast Marquee

A Marquee component for Svelte inspired by react-fast-marquee.

Demo

Check out the demo here and play around with some sample marquees.

Installation

If you're using npm, in the command prompt run:

npm install svelte-fast-marquee --save

If you're using yarn, run:

yarn add svelte-fast-marquee

Usage

To use the component, first import Marquee into your file:

import Marquee from "svelte-fast-marquee";

Then wrap the <Marquee> tags around any component or text you'd like to slide.

<Marquee>
  I can be a Svelte component, multiple Svelte components, or just some text.
</Marquee>

A sample file might look like this:

<script>
    import MyComponent from '../components/MyComponent';
    import Marquee from 'svelte-fast-marquee';
</script>
<Marquee>
    <MyComponent />
    <MyComponent />
    <MyComponent />
</Marquee>

Props

Property	Type	Default	Description
`style`	`string`	\| The inline style for the container div.
`class`	`string`	\| The name of the css class to style the container div.
`play`	`boolean`	`true`	Whether to play or pause the marquee
`speed`	`number`	`100`	The speed of the marquee in pixels per second
`pauseOnHover`	`boolean`	`false`	Whether to pause the marquee when hovered
`pauseOnClick`	`boolean`	`false`	Whether to pause the marquee when clicked
`direction`	`"left"` or `"right"`	`"left"`	The direction the marquee is sliding
`gradient`	`boolean`	`false`	Whether to show a gradient on right and left
`--gradientWidth`	`string`	"10%"	The width of the gradient on either side.
`--gradientColor`	`string`	"white"	The color of the gradient