vanilla-infinite-marquee v1.0.9

Vanilla Infinite Marquee

Installation

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