jQuery Plugin For Infinitely Scrolling Elements - ticker

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.

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
});

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

  • Publication date: 14.03.2018
  • Source