Smoothly Scroll The Content Left Or Right - jQuery SnackMarquee

File Size: 7.36 KB
Views Total: 3102
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Smoothly Scroll The Content Left Or Right - jQuery SnackMarquee

SnackMarquee is a dead simple text marquee plugin which smoothly scrolls text content left or right in a fixed height container. Great for breaking news, Stock Quotes, Exchange Rates, etc.

How to use it:

1. Reference the necessary JavaScript and CSS files in your project:

<link href="snackmarquee.css" rel="stylesheet">
<script src="" 
<script src="snackmarquee.js"></script>

2. Create a container in which you want to place the text marquee.

<div class="slider"></div>

3. Initialize the plugin and define an array of text to display in the marquee.

const slider = new SnackMarquee({
      selector: '.slider',
      children: [
        'Text 1',
        'Text 2',
        'Text 3'

4. Start the text marquee.


5. Stop the text marquee.


6. Customize the appearance of the text marquee.

const slider = new SnackMarquee({

      // or 'left'
      mode: 'right',

      // animation speed
      speed: 100,

      // space between text
      space: 20,

      // font family
      font: 'Arial, Helvetica, sans-serif',

      // font size
      size: 24,

      // text color
      color: 'white',

      // background color
      background: 'black',

      // width/height
      width: 0,
      height: 0

7. You can also override the default settings by using the following methods:

// set mode to 'left'

// set mode to right

// set animation speed

// set text color

// set background color

// set size

// delete text

// insert new text
slider.insert(1, 'Quisque elementum diam nisi, eget sollicitudin ex rutrum at.')

This awesome jQuery plugin is developed by rheesh. For more Advanced Usages, please check the demo page or visit the official website.