Vanilla Infinite Marquee

Installation

CDN Usage

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanilla-infinite-marquee@1.0.13/infinite-marquee.min.css">
<script src="https://cdn.jsdelivr.net/npm/vanilla-infinite-marquee@1.0.13/infinite-marquee.bundle.js"></script>

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

npm install vanilla-infinite-marquee

If you're using yarn, run:

yarn add vanilla-infinite-marquee

Demo

Usage

To use the component, first import CSS styles into your CSS/SCSS file:

@import 'node_modules/vanilla-infinite-marquee/infinite-marquee.css'; //OR
@import 'node_modules/vanilla-infinite-marquee/infinite-marquee.scss';

Basic HTML Input

<div class="marquee-container">
    <p>Horizontal Marquee Item 1</p>
    <p>Horizontal Marquee Item 2</p>
</div>

import InfiniteMarquee into your JS file:

import InfiniteMarquee from 'vanilla-infinite-marquee';

new InfiniteMarquee({
    element: '.marquee-container',
    speed: 25000,
    smoothEdges: true,
    direction: 'right',
    gap: '15px',
    duplicateCount: 2,
    mobileSettings: {
        direction: 'top',
        speed: 20000
    },
    on: {
        beforeInit: () => {
            console.log('Not Yet Initialized');
        },

        afterInit: () => {
            console.log('Initialized');
        }
    }
});

Options