Getting started

Versoly marquee can be installed using npm, pnpm, CDNs. It is also tiny so you could just copy paste it onto a landing page for improved page speed.

Install versoly-marquee package

npm install versoly-marquee --save

import versoly-marquee package

import { Marquee } from "versoly-marquee";

// add data-toggle="marquee"
document.querySelectorAll('[data-toggle="marquee"]').forEach((elem) => {
    // set options on the element using data-options="{'duration': 10, 'direction': 'rtl'}"
    let t = elem.dataset.options || "{}";
    // parse data-options using replace for security instead of eval 
    let options = JSON.parse(t.replaceAll("'", '"'));
    // add Marquee animation
    const marquee = new Marquee(elem, options);
});

CDN

<script src="https://unpkg.com/versoly-marquee@1/dist/index.global.min.js"></script>

Frequently Asked Questions

Why create Versoly Marquee

It shouldn't require custom JS and re-inventing the wheel every time to add the same features to landing pages and marketing sites.

By default if you want a marquee you should use versoly-marquee, and only if it doesn't fit your use case to build it yourself.

Why not just use CSS?

Versoly Marquee was built to be used in Versoly page builder + CMS and other headless CMSs, this means that non-technical users would be changing content that would effect the CSS required to make it work.

There is no way to only use CSS to create a marquee that isn't a fixed width.

Why not use a slider library?

Slider libraries are usually 20-100x bigger than versoly-marquee, 99% of the features aren't needed.

Roadmap

• Responsive options
• Plugins. On scroll, on mouse over.
• Vue/React and other JS frameworks

Community

If you need help or just want to discuss about the library join the community on Github:

Discuss on GitHub

For casual chatting with others using the library:

Join the Versoly Discord Server