svelte-fast-marquee

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