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 |