Smooth And Customizable Horizontal Scroller – jsmarquee

Preview:

Description:

A tiny JavaScript library that allows you to create a smooth and customizable horizontal content scroller for showcasing breaking news, announcements, or promotional content on your website.

How to use it:

1. Add your content to the scroller container.

<div class="my-marquee" id="marquee-demo-2">
  <div>
    <!-- item -->
      <p>Item 1</p>
    <!-- end item -->
    <!-- item -->
      <p>Item 2</p>
    <!-- end item -->
    <!-- item -->
      <p>Item 13</p>
    <!-- end item -->
    ...
  </div>
</div>

2. The required CSS styles for the scroller.

.my-marquee {
  overflow: hidden;
}
.my-marquee > div {
  display: inline-flex;
  position: relative;
}

3. Load the minified version of the jsmarquee library.

<script src="marquee.min.js"></script>

4. Initialize the jsmarquee.

const m = new Marquee({
      element: '#marquee-demo',
})

5. Start the scroller.

m.run();

6. Change the animation speed. Default: 1.

const m = new Marquee({
      element: '#marquee-demo',
      velocity: 3,
})