jQuery Easy News Ticker Which Scrolls The List Infinitely

jquery-easy-ticker-plugin

jQuery easy ticker is a news ticker-like plugin that scrolls the list endlessly. It is highly customizable and flexible with a lot of features and works in all browsers.

vertical scrolling news ticker, breaking news ticker html code, jquery news ticker vertical

Features:

  • Two directions available (up and down).
  • They can be targeted to any template.
  • Flexible API to extend the range of various applications.
  • Supports ‘thinning’ functions.
  • The mouse Pause feature is available.
  • The transmission speed can be changed.
  • Controls can be added to play/pause or move the menu up and down.
  • Cross-browser support.
  • Lightweight (2.72KB – mini).

How to make use of it:

1. Include the newest jQuery library along with jquery.easy-ticker.js in your documents.

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

2. Include a jQuery easing plugin for relieving functions.

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

3. Create the HTML on your information ticker.

<div class="demo">
  <ul>
    <li>
       <img src=" " alt="Expandable Input" />
       <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=" " alt="jQuery Photo Plugin" />
       <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=" " alt="Metreaux Tables" />
       <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.

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

5. All attainable choices to config the information 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
    }
  }
  
});

Flexible & Customizable jQuery News Ticker Plugin, jQuery Easy Ticker plugin, horizontal news ticker, jquery news ticker responsive


See Demo And Download

Official Website(vaakash): Click Here

This superior jQuery/javascript plugin is developed by vaakash. For extra Advanced Usage, please go to the official website.

Share