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="https://code.jquery.com/jquery-3.4.0.min.js" 
        integrity="sha384-JUMjoW8OzDJw4oFpWIB2Bu/c6768ObEthBMVSiIx4ruBIEdyNSUQAjJNFqT5pnJ6" 
        crossorigin="anonymous">
</script>
<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.

slider.start();

5. Stop the text marquee.

slider.stop();

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'
slider.mode='left'

// set mode to right
slider.mode='right'

// set animation speed
slider.speed=50

// set text color
slider.color='yellow'

// set background color
slider.background='grey'

// set size
slider.width=320
slider.width=640

// delete text
slider.delete(1)

// 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.