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 --saveIf you're using yarn, run:
yarn add svelte-fast-marqueeUsage
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 |