jQuery Plugins › jQuery Animation Plugins › jQuery Easy Ticker

Flexible & Customizable jQuery News Ticker Plugin - Easy Ticker

File Size:	25.2 KB
Views Total:	40540
Last Update:	01/23/2022 02:35:00 UTC
Publish Date:	01/26/2014 03:30:20 UTC
Official Website:	Go to website
License:	MIT

Demo Download

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: true,

  // enables autoplay
  autoplay: true,

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

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

Changelog:

v3.4.0 (2022-01-23)

New autoplay option

v3.4.0 (2022-01-21)

New callback to call after height adjustment complete
Removed delayed height adjustment on init

v3.3.0 (2022-01-03)

Handle issue when ticker is moved quickly using buttons

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.