Flexible & Customizable jQuery News Ticker Plugin - Easy Ticker

Flexible & Customizable jQuery News Ticker Plugin - Easy Ticker
File Size: 24.8 KB
Views Total: 34738
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Easy Ticker is a jQuery plugin helps you create a highly customizable, cross browser, SEO-friendly flexible and infinite news ticker on your web page.

Features:

  • Lightweight (~3kb minified) and easy to use
  • Allows to scroll down or up the items in your news ticker.
  • Auto scroll on page loaded and stop on mouse hover.
  • Allows to control the behavior out of the box.
  • Customizable easing and animation options.

Related plugins:

Basic Usage:

1. Include the latest jQuery library together with jquery.easy-ticker.js on your documents.

<script src="/path/to/cdn/jquery.min.js"></script> 
<script src="/path/to/dist/jquery.easy-ticker.min.js"></script> 

2. Include jQuery easing plugin for easing functions. (OPTIONAL)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

3. Create the html for your news ticker.

<div class="demo">
  <ul>
    <li>
       <img src="https://www.jqueryscript.net/small/images/jQuery-Plugin-To-Expand-Collapse-Input-Field-Expandable-Input.jpg" alt="Expandable Input" />
       <a href="https://www.jqueryscript.net/form/jQuery-Plugin-To-Expand-Collapse-Input-Field-Expandable-Input.html">Expandable Input</a>
       <p>Expandable Input is a minimal jQuery plugin to smoothly expand the width of a input filed when focused/clicked and collapse it when lose focus.</p>
    </li>
    <li class="odd">
       <img src="https://www.jqueryscript.net/small/images/Creating-A-Full-Page-Photo-Gallery-with-jQuery-Photor-Plugin.jpg" alt="jQuery Photor Plugin" />
       <a href="https://www.jqueryscript.net/gallery/Creating-A-Full-Page-Photo-Gallery-with-jQuery-Photor-Plugin.html">jQuery Photor Plugin</a>
       <p>Photor is a fast and easy jQuery plugin to create a responsive & touch-friendly full page image gallery with CSS3 transitions and transforms.</p>
    </li>
    <li>
       <img src="https://www.jqueryscript.net/small/images/Windows-8-Style-jQuery-Data-Table-Decorator-Metreaux-Tables.jpg" alt="Metreaux Tables" />
       <a href="https://www.jqueryscript.net/table/Windows-8-Style-jQuery-Data-Table-Decorator-Metreaux-Tables.html">Metreaux Tables</a>
       <p>Metreaux Tables is a jQuery plugin to create nice, clean, themeable, andmodern Windows 8 UI Style data tables with the power of DataTables jQuery javascript library.</p>
    </li>
    ...
  </ul>
</div>

4. Call the plugin with default settings. That's it.

$(function(){
  $('.demo').easyTicker();
});

5. All possible options to config the news ticker.

$('.demo').easyTicker({

  // or 'down'
  direction: 'up',

  // easing function
  easing: 'swing',

  // animation speed
  speed: 'slow',

  // animation delay
  interval: 2000,

  // height
  height: 'auto',

  // the number of visible elements of the list
  visible: 0,

  // enables pause on hover
  mousePause: 1,

  // custom controls
  controls: {
    up: '',
    down: '',
    toggle: '',
    playText: 'Play',
    stopText: 'Stop'
  },

  // callbacks
  callbacks: {
    before: function(ul, li){
      // do something
    },
    after: function(ul, li){
      // do something
    }
  }
  
});

Changelog:

v3.2.1 (2020-04-13)

  • Using visibilityChange API for window focus detection
  • Handle multiple start attempts

2020-04-13

  • v3.1.0: Fix high CPU consumption bug

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