jQuery Plugin For Infinitely Scrolling Elements - ticker

ticker is a simple, minimal jQuery plugin used to infinitely scrolling through a group of elements just like the traditional marquee element. Ideal for news ticker, stock ticker, image scroller, and much more.

How to use it:

1. Include the stylesheet ticker.min.css on the webpage that provides the basic styles & responsive rules (based on CSS3 flexbox) for the ticker.

<link rel="stylesheet" href="dist/css/ticker.min.css">

2. Create a group of elements to be displayed in the ticker.

<div class="default-ticker">
  <div>Element 1</div>
  <div>Element 2</div>
  <div>Element 3</div>
  <div>Element 4</div>
  <div>Element 5</div>
  ...
</div>

3. Include jQuery library and the ticker.min.js script at the bottom of the webpage.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="dist/js/ticker.min.js"></script>

4. Call the function on the top container to initialize the ticker.

$(".default-ticker").ticker();

5. Config the ticker by overriding the following options.

$(".default-ticker").ticker({

  // item selector
  item: 'div',

  // Toggles whether the ticker should pause on mouse hover
  pauseOnHover: false,

  // Animation speed
  speed: 60,

  // Decides whether the ticker breaks when it hits a new item or if the track has reset
  pauseAt: '',

  // delay in milliseconds
  delay: 500

});

Changelog:

2020-03-28

• JS & CSS update

---

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